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标签：
以上实例的所有代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 路由的嵌套</title>
</head>
<body>
<div id="one">
<router-link to="/home">首页</router-link>
<router-link to="/foods">美食</router-link> <div>
<!--将数据显示在这里-->
<router-view></router-view>
</div>
</div>
</body>
<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"
}
] // 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>
</html>
路由嵌套