前言
vue.js除了拥有组件开发体系之外，还有自己的路由vue-router。在没有使用路由之前，我们页面的跳转要么是后台进行管控，要么是用a标签写链接。使用vue-router后，我们可以自己定义组件路由之间的跳转，还可以设置稍复杂的嵌套路由，创建真正的spa（单页面应用）。我之前用vue-cli脚手架写了一个简单的人员管理实例，现在我们不用脚手架，就用原生的vue来写，本文也主要是通过实例来讲解vue.js+vue-router相关知识。
简单路由跳转实例
1.起步
下载vue-router.js，新建项目文件夹命名为router，将下载的vue-router.js放在router/js/路径下。新建index.html作为主页，引入样式文件，引入两个关键的js，vue和vue-router，再在body标签底部引入一个main.js用来写vue实例及配置路由，注意引用顺序。
1 <!DOCTYPE html> 2 ??3 <html lang="en"> 4 ??5 <head> 6 ??7 <meta charset="UTF-8"> 8 ??9 <title>首页</title>10 ?11 <link rel="stylesheet" href="css/main.css">12 ?13 <script src="js/vue.js"></script>14 ?15 <script src="js/vue-router.js"></script>16 ?17 </head>18 ?19 <body>20 ?21 <div id="app"></div>22 ?23 <template></template> //组件区域24 ?25 <script src="js/main.js"></script>26 ?27 </body>28 ?29 </html>
2.定义路由视图
调用foot-nav组件，将底部导航组件引入在这里，是因为两个路由页面都要用到它
1 <div id="app">2 ?3 <router-view></router-view>4 ?5 <foot-nav></foot-nav>6 ?7 </div>
知识点:：<router-view>
<router-view>标签相当于一个插槽，用于将匹配到的组件渲染出来，一个个路由定义的组件相当于卡，跳转某个路由时，该路由下的页面就插在这个插槽中渲染显示。
一个组件可以有多个<router-view>视图，并用name值去区分它们，这种多用在网页布局方面，如上左主结构，这个时候就可以定义三个<router-view>
示例
1 <div id="app"> 2 ??3 <router-view name="top"></router-view> 4 ??5 <router-view name="left"></router-view> 6 ??7 <router-view name="main"></router-view> 8 ??9 </div>10 ?11 ?12 ?13 <script>14 ?15 var topCom = Vue.extend({16 ?17 template: ‘<div>顶部</div>‘18 ?19 })20 ?21 ?22 ?23 var leftCom = Vue.extend({24 ?25 template: ‘<div>侧边栏</div>‘26 ?27 })28 ?29 ?30 ?31 var mainCom = Vue.extend({32 ?33 template: ‘<div>主页</div>‘34 ?35 })36 ?37 ?38 ?39 var router = new VueRouter({40 ?41 routes:[42 ?43 {44 ?45 path: ‘/‘,46 ?47 name: ‘home‘,48 ?49 components:{50 ?51 top: topCom,52 ?53 left: leftCom,54 ?55 main: mainCom56 ?57 }58 ?59 }60 ?61 ]62 ?63 })64 ?65 ?66 ?67 var app = new Vue({68 ?69 el: ‘#app‘,70 ?71 router72 ?73 })74 ?75 </script>再为各个板块设置一下样式，打开浏览器查看效果
3.子组件（底部导航）
3.1 创建子组件
人员管理系统分为两个模块，一个首页，一个管理页，两个页面都需引入一个公共组件：底部导航。在首页index.html中加入以下模板
1 <template id="footer"> 2 ??3 <div class="footer fixed"> 4 ??5 <ul> 6 ??7 <li><router-link to="/">首页</router-link></li> 8 ??9 <li><router-link :to="{name:‘manage‘,params:{id:1}}">人员管理</router-link></li>10 ?11 </ul>12 ?13 </div>14 ?15 </template>知识点:：<router-link>
<router-link>标签主要实现跳转链接功能，属性to=‘/‘即是跳转到path为‘/‘的路径（我们等会得配置路径为‘/‘和‘/manage‘的路由）
router-link除了可以跳转链接之外，还可以传参，可以传多个参数，一般格式为
<router-link to="路由路径"></router-link><router-link :to="{ path:路由路径}"></router-link><router-link :to="{name:‘路由命名‘,params:{参数名:参数值,参数名:参数值}}"></router-link>知识点：this.$router.push
如果不想用<router-link>标签，也可以给需要跳转的地方添加一个点击事件，在事件里写this.$router.push方法
this.$router.push(‘路由路径‘)this.$router.push({name:‘路由命名‘,params:{参数名:参数值,参数名:参数值}})3.2 注册子组件
在main.js中全局注册子组件并且定义vue实例
1 Vue.component(‘foot-nav‘,{ 2 ??3 template: ‘#footer‘ 4 ??5 }) 6 ??7 ??8 ??9 var app = new Vue({10 ?11 el: ‘#app‘12 ?13 })4.首页及管理页组件
4.1 创建首页及管理页
1 <template id="index"> 2 ??3 <div> 4 ??5 首页 6 ??7 </div> 8 ??9 </template>10 ?11 <template id="manage">12 ?13 <div>14 ?15 人员管理16 ?17 <p>id:{{id}}</p>18 ?19 </div>20 ?21 </template>4.2 注册主页及管理页
1 var Home = Vue.extend({ 2 ??3 template: ‘#index‘ 4 ??5 }) 6 ??7 ??8 ??9 var Manage = Vue.extend({10 ?11 template: ‘#manage‘,12 ?13 data(){14 ?15 return{16 ?17 id: ‘‘18 ?19 }20 ?21 },22 ?23 mounted:function(){24 ?25 this.id = this.$route.params.id26 ?27 }28 ?29 })知识点：this.$route.params
this.$route指向vue实例的路由对象，params是路由传过来的参数集合
5.定义路由
定义路由router，并引进vue实例中
1 var router = new VueRouter({ 2 ??3 routes:[ 4 ??5 { 6 ??7 path:‘/‘, 8 ??9 name: ‘home‘,10 ?11 component:Home12 ?13 },14 ?15 {16 ?17 path:‘/manage/:id‘,18 ?19 name: ‘manage‘,20 ?21 component:Manage22 ?23 }24 ?25 ]26 ?27 })28 ?29 ?30 ?31 var app = new Vue({32 ?33 el: ‘#app‘,34 ?35 router36 ?37 })知识点：path:‘/路径/:参数名‘
一个路由要传参时，需在path路径后面添加一个‘/’并加上冒号和参数名
知识点：路由激活class
vue-router当路由处于激活状态时，会有一个class类“router-link-active”，我们只需为这个类添加样式就可以实现路由激活状态下的样式编写
接下来去浏览器查看路由跳转效果
6.嵌套路由
有时我们项目由多层嵌套组件组成，这个时候就需要用到嵌套路由
先看下图例子，我们给manage路由再添加两个子路由
6.1 在组件内部添加<router-view>
1 <template id="manage"> 2 ??3 <div> 4 ??5 人员管理 6 ??7 <ul> 8 ??9 <li><router-link to="/manage/list">人员列表</router-link></li>10 ?11 <li><router-link to="/manage/edit">编辑</router-link></li>12 ?13 </ul>14 ?15 <router-view></router-view>16 ?17 </div>18 ?19 </template>
6.2 定义子路由
1 //构建组件 2 ??3 var List = Vue.extend({ 4 ??5 template: ‘<div>人员列表</div>‘ 6 ??7 }) 8 ??9 ?10 ?11 var Edit = Vue.extend({12 ?13 template: ‘<div>编辑</div>‘14 ?15 })16 ?17 ?18 ?19 ?20 ?21 ?22 ?23 var router = new VueRouter({24 ?25 routes:[26 ?27 {28 ?29 path:‘/‘,30 ?31 name: ‘home‘,32 ?33 component:Home34 ?35 },36 ?37 {38 ?39 path:‘/manage‘,40 ?41 name: ‘manage‘,42 ?43 component:Manage,44 ?45 //子路由由children表示46 ?47 children:[48 ?49 {50 ?51 path:‘list‘,52 ?53 name: ‘list‘,54 ?55 component:List56 ?57 },58 ?59 {60 ?61 path:‘edit‘,62 ?63 name: ‘edit‘,64 ?65 component:Edit66 ?67 }68 ?69 ]70 ?71 }72 ?73 ]74 ?75 })7.路由重定向
未设置路由重定向时，当我们随意输入一个路径，会显示一片空白或404。为了防止这种现象发生，我们一般在配置路由时再定义一个重定向路由
1 ??2 var router = new VueRouter({ 3 ??4 routes:[ 5 ??6 { 7 ??8 path:‘/‘, 9 ?10 name: ‘home‘,11 ?12 component:Home13 ?14 },15 ?16 {17 ?18 path:‘*‘,19 ?20 redirect: ‘/‘21 ?22 },23 ?24 ]25 ?26 })打开浏览器，随意输入一个未定义的路由查看效果
vue.js路由vue-router（一）——简单路由基础
原文地址：https://www.cnblogs.com/weifeng123/p/9876429.html