在web使用中,经常需要更新或者跳转页面。vue-router表现的是点击按钮出现内容。也就是一种映射关系。
要了解vue路由,那么先要知道几个参数:route、routes、router
在vue中,route表示创造一条路由,那么routes从字面意思就是创建多条路由,它就是把多条路由集合在一起。router是用来管理这么多路由的管理人。
那么定义路由怎么做呢:
const routes: [{
path: "/home",
component: home
//path表示路径,component表示链接的组件
},
{
path: "/user/:id",
component: user
}
创建了多条路由,那么用管理员来管理创建的路由对象把
const router = new VueRouter({
routes
)}
那么接下来来创建组件
var home = Vue.extend({
template: `
<h1>网站主页</h1>
//要使用多行的话,使用 `` 反引号,就是tab上面的英文状态下的按键 `
`
})
var user = Vue.extend({
//Vue.extend用来加载模板
template: "<h1>用户个人信息页面:{{$route.params.id}}</h1>"
})
创建完控件之后要在页面上渲染
在要使用路由的地方用 来加载链接,to表示要跳转的链接
<router-link to="/home">主页</router-link>
<router-link to="/user">用户页面</router-link>
<!-- -->
最后要在后面加上 也就是把组件内容渲染到标签所在位置
最后要把路由注入到根实例中
new Vue({
el: "#app",
router: router
})
动态路由
我们在访问网页时,登陆某个网站,根据网站页面的不同,链接也会不一样,但有个数据基本不会改变,那是你的用户Id,每个用户都不一样,所以Id是一直变化的。这里就可以使用动态路由。
动态路由的Path,:开头是动态部分
{
path: "/user/:id",
component: user
}
那么怎么显示呢
var user = Vue.extend({
template: "<h1>用户个人信息页面:{{$route.params.id}}</h1>"
//params就是调用动态路由的参数
//this.$route.params这里面记录的是路由的参数
})
根据传入的id不同,显示的Id也不同
*
*表示任意字符,没有匹配到的url 全部转入这里,就比方说 404页面找不到错误
嵌套路由
嵌套名副其实就是嵌套,就比方说这个页面
那么最主要的是孩子childern的东西加在哪里?
那肯定加在他父亲那里啊,这问的不是屁话吗
var other = Vue.extend({
template: `
<div style="width: 200px;">
<ul class="nav nav-pills nav-stacked">
<li role="presentation" >
<router-link to="/other/diantai">电台</router-link></li>
<li role="presentation"><router-link to="/other/paihang">排行榜</router-link></li>
<li role="presentation"><router-link to="/other/zhibo">直播</router-link></li>
</ul>
<router-view></router-view>
</div>
`
});
var NotFound=Vue.extend({
template:"<h1>404错误,找不到网页</h1>"
})
var diantai = Vue.extend({
template: "<h2>电台MC</h2>"
})
var paihang = Vue.extend({
template: "<h2>收集排行榜</h2>"
})
var zhibo = Vue.extend({
template: "<h2>直播页</h2>"
})
const router = new VueRouter({
routes: [{
path: "/home",
component: home
},
{
path: "/user/:id",
component: user
},
{
path: "/other",
component: other,
children: [{
path: "diantai",
component: diantai
},
{
path: "paihang",
component: paihang
},
{
path: "zhibo",
component: zhibo
},
// {
// path: "",
// component: diantai
// //访问默认页面
// }
]
},
{path: "*",component: NotFound},
]
})
像代码中写的那样,在孩子那里的path里面不需要加 /
在链接那里 to里面要加上父类的地址 也就是 to="/父/子"
路由命名
顾名思义就是给路由加个name,借此可以从to中调用对象
加了name就可以这样搞了
<router-link :to="{name:'user',params:{id:123}}">用户页面</router-link>
记得要在to前面加上: ,因为是对象,所以要用:绑定
那最后我把所有代码放在这里:
<body>
<script src="vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<div id="app">
<ul class="nav nav-pills ">
<li role="presentation">
<router-link to="/home">主页</router-link>
</li>
<li role="presentation">
<router-link to="/user">用户页面</router-link>
</li>
<li role="presentation">
<router-link to="/other">其他</router-link>
</li>
</ul>
<div class="container" >
<router-view></router-view>
<!---->
</div>
</div>
</body>
<script>
var home = Vue.extend({
template: `
<h1>网站主页</h1>
`
})
var user = Vue.extend({
template: "<h1>用户个人信息页面:{{$route.params.id}}</h1>"
})
var other = Vue.extend({
template: `
<div style="width: 200px;">
<ul class="nav nav-pills nav-stacked">
<li role="presentation" >
<router-link to="/other/diantai">电台</router-link></li>
<li role="presentation"><router-link to="/other/paihang">排行榜</router-link></li>
<li role="presentation"><router-link to="/other/zhibo">直播</router-link></li>
</ul>
<router-view></router-view>
</div>
`
});
var NotFound=Vue.extend({
template:"<h1>404错误,找不到网页</h1>"
})
var diantai = Vue.extend({
template: "<h2>电台MC</h2>"
})
var paihang = Vue.extend({
template: "<h2>收集排行榜</h2>"
})
var zhibo = Vue.extend({
template: "<h2>直播页</h2>"
})
const router = new VueRouter({
routes: [{
path: "/home",
component: home
},
{
path: "/user/:id",
component: user
},
{
path: "/other",
component: other,
children: [{
path: "diantai",
component: diantai
},
{
path: "paihang",
component: paihang
},
{
path: "zhibo",
component: zhibo
},
// {
// path: "",
// component: diantai
// //访问默认页面
// }
]
},
{path: "*",component: NotFound},
]
})
new Vue({
el: "#app",
router: router
})
</script>
关于vue-cli使用,请参考
https://www.cnblogs.com/SamWeb/p/6610733.html