vue-router路由常用配置
1、mode：配置路由模式，默认为hash，由于URL很丑，可以修改为history，但是需要服务端的支持；
以上一篇的博文为实例：
初始时url的显示：
使用mode之后的显示：
使用mode的代码：
// 3 创建路由对象 const myRouter = new VueRouter({ //routes : routes routes : myRoutes, mode:'history' });
但是当复制该链接在新的窗口打开的时候，不能打开该链接，如图：
说明需要服务端的支持
2、redirect：重定向，可以设置默认页面；
初始时，默认页面是没有显示的如图：
使用 redirect重定向后：
使用redirect的代码：
//2 配置路由 路由可能有多个 const myRoutes = [ { path : "/home", component : Home }, { path : "/foods", component : Foods }, { path:"*", redirect:"/home" } ]
3、linkActiveClass：设置router-link激活样式；
由于router-link被渲染成为a标签：
有class，因此可以设置其点击时的样式：
修改该样式的css:
<style> .router-link-active{ color: white; background-color: black; } </style>
也可以通过 linkActiveClass：样式名称 进行设置其样式
代码如下，效果图同上：
// 3 创建路由对象 const myRouter = new VueRouter({ //routes : routes routes : myRoutes, //mode:'history' linkActiveClass : "active" }); new Vue({ //router : router router : myRouter //4 注入路由 简写 }).$mount("#one"); </script> <style> .active{ color: white; background-color: black; } </style>
路由嵌套
路由的嵌套：一个路由中嵌套（包含）其他的路由；
在路由的配置中，使用children可以配置子路由，children也可以配置多个，与routes一致；
在上面的实例中的美食下添加几个路由，添加的路由就是它的子路由：
初始只配置了它的跳转，并没有配置它的路由
初始时代码：
<template id="foods"> <div> <h2>美食广场</h2> <ul> <li><router-link to="/foods/bjc"> 北京菜</router-link></li> <li><router-link to="/foods/hnc"> 湖南菜</router-link></li> <li><router-link to="/foods/xc"> 湘菜</router-link></li> <li><router-link to="/foods/yc"> 粤菜</router-link></li> <li><router-link to="/foods/scc"> 四川菜</router-link></li> </ul> </div> </template>
let Foods = { template : "#foods" }
定义路由后：
<template id="foods"> <div> <h2>美食广场</h2> <ul> <router-link to="/foods/bjc" tag="li"> 北京菜</router-link> <router-link to="/foods/hnc" tag="li"> 湖南菜</router-link> <router-link to="/foods/xc" tag="li"> 湘菜</router-link> <router-link to="/foods/yc" tag="li"> 粤菜</router-link> <router-link to="/foods/scc" tag="li"> 四川菜</router-link> </ul> <router-view></router-view> </div> </template> <script type="text/javascript" src="../js/vue.js" ></script> <script type="text/javascript" src="../js/vue-router.js" ></script> <script> //1 定义组件 let Home = { template : "<h2>首页</h2>" } let Foods = { template : "#foods" } //定义foods中的子组件 let Bjc={ template : "<h3>北京菜</h3>" } let Hnc={ template : "<h3>湖南菜</h3>" } let Xc={ template : "<h3>湘菜</h3>" } let Yc={ template : "<h3>粤菜</h3>" } let Scc={ template : "<h3>四川菜</h3>" } //2 配置路由 路由可能有多个 const myRoutes = [ { path : "/home", component : Home }, { path : "/foods", component : Foods, children:[ { path:"bjc", component:Bjc }, { path:"hnc", component:Hnc }, { path:"xc", component:Xc }, { path:"yc", component:Yc }, { path:"scc", component:Scc } ] }, { path:"*", redirect:"/home" } ]
使用tag标签可以将router-link渲染成为li标签：
以上实例的所有代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title> 路由的嵌套</title> 6 </head> 7 <body> 8 <div id="one"> 9 <router-link to="/home">首页</router-link> 10 <router-link to="/foods">美食</router-link> 11 12 <div> 13 <!--将数据显示在这里--> 14 <router-view></router-view> 15 </div> 16 </div> 17 </body> 18 <template id="foods"> 19 20 21 <div> 22 23 <h2>美食广场</h2> 24 <ul> 25 <router-link to="/foods/bjc" tag="li"> 北京菜</router-link> 26 <router-link to="/foods/hnc" tag="li"> 湖南菜</router-link> 27 <router-link to="/foods/xc" tag="li"> 湘菜</router-link> 28 <router-link to="/foods/yc" tag="li"> 粤菜</router-link> 29 <router-link to="/foods/scc" tag="li"> 四川菜</router-link> 30 </ul> 31 32 <router-view></router-view> 33 </div> 34 </template> 35 36 <script type="text/javascript" src="../js/vue.js" ></script> 37 <script type="text/javascript" src="../js/vue-router.js" ></script> 38 <script> 39 40 //1 定义组件 41 let Home = { 42 template : "<h2>首页</h2>" 43 } 44 let Foods = { 45 template : "#foods" 46 } 47 48 //定义foods中的子组件 49 50 let Bjc={ 51 template : "<h3>北京菜</h3>" 52 53 } 54 55 let Hnc={ 56 template : "<h3>湖南菜</h3>" 57 58 } 59 let Xc={ 60 template : "<h3>湘菜</h3>" 61 62 } 63 64 let Yc={ 65 template : "<h3>粤菜</h3>" 66 67 } 68 69 let Scc={ 70 template : "<h3>四川菜</h3>" 71 72 } 73 74 //2 配置路由 路由可能有多个 75 const myRoutes = [ 76 { 77 path : "/home", 78 component : Home 79 }, 80 { 81 path : "/foods", 82 component : Foods, 83 84 children:[ 85 { 86 path:"bjc", 87 component:Bjc 88 89 90 }, 91 { 92 path:"hnc", 93 component:Hnc 94 95 96 }, 97 98 { 99 path:"xc", 100 component:Xc 101 102 103 }, 104 { 105 path:"yc", 106 component:Yc 107 108 109 }, 110 { 111 path:"scc", 112 component:Scc 113 114 115 } 116 117 118 119 120 121 ] 122 }, 123 { 124 path:"*", 125 redirect:"/home" 126 } 127 ] 128 129 // 3 创建路由对象 130 const myRouter = new VueRouter({ 131 //routes : routes 132 routes : myRoutes, 133 //mode:'history' 134 linkActiveClass : "active" 135 136 }); 137 138 new Vue({ 139 //router : router 140 router : myRouter //4 注入路由 简写 141 }).$mount("#one"); 142 </script> 143 <style> 144 145 146 .active{ 147 color: white; 148 149 background-color: black; 150 } 151 </style> 152 </html>