欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 前端技术 > vue >内容正文

vue

Vue入门---- vue-router

发布时间：2025/3/15 vue 42 豆豆
生活随笔 收集整理的这篇文章主要介绍了 Vue入门---- vue-router 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

#简介：
vue-router官网
用 Vue.js + vue-router 可以快速创建SPA（单页应用程序），是非常简单的。使用 Vue.js ，我们已经可以通过组合Component来组成应用程序。
引入 vue-router 的过程：将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。

##直接使用方法：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>// 注意顺序不能颠倒！！！<script src="D:\Github\vue\lib\vue.js"></script><script src="D:\Github\vue\lib\vue-router.js"></script><script>window.onload = function() {// 1. 准备templatevar A = Vue.extend({template: "<h3>我是A</h3>"})var B = Vue.extend({template: "<h3>我是B</h3>"})// 2. 准备routesconst routes = [{path: "/A",component: A,}, {path: "/B",component: B,}, {path: '*',// 默认打开redirect:'/A'}]// 3. 调用vue-routerconst router = new VueRouter({//这里等价于routes： routes，不要随意写其他的名字！！！routes,})// 4. 挂载到vue上new Vue({router,el: '#box'})}</script> </head> <body><div id="box"><div><router-link to="/A">A</router-link><router-link to="/B">B</router-link> </div><div><router-view></router-view></div></div> </body> </html>

##模块化使用方法

部分目录结构如下：

├──node——modules ├──src├──assets├──components // 用来存放组件A.vue和B.vue│ ├──A.vue│ └──B.vue├──App.vue├──main.js├──router.config.js // router.config.js 用来存放路由信息└──...

一、组件定义

A.vue

<template><h3>我是A</h3> </template><script> export default {} </script><style></style>

B.vue

<template><h3>我是B</h3> </template><script> export default {} </script><style></style>

二、路由信息
router.config.js

import A from './components/A.vue' import B from './components/B.vue'export default {routes: [{path: "/A",component: A,}, {path: "/B",component: B,}, {path: "*",redirect: '/A'}] }

三、调用router并挂载到vue上
main.js

import Vue from 'vue' import VueRouter from 'vue-router'import App from './App.vue' import routes from './router.config.js'Vue.use(VueRouter);const router = new VueRouter(routes) new Vue({el: '#app',router,render: h => h(App) })

四、router-link与router-view
App.vue

<template><div id="app">{{msg}}<ul><li><router-link to='/A'>A</router-link><router-link to='/B'>B</router-link></li></ul><div><router-view></router-view></div></div> </template><script> export default {name: 'app',data () {return {msg: 'Welcome to Your Vue.js App'}} } </script><style></style>

总结

以上是生活随笔为你收集整理的Vue入门---- vue-router的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。