vue是一个单页面程序应用,即使有无数个vue文件,也只是vue页面中的组件s
vue-router是vue的一个插件,用来提供路由功能,通过路由的改变动态加载组件,达到开发单页面程序的目的
设置了路由之后,不需要再注册组件,只需要注册了路由之后,通过path、name进行组件之间的切换
路由应用
1.声明组件
let com = {
data(){ return{} },
template:``,
}
2.声明路由router,创建一个路由实例,可以为router设置:
1)path路径
2)component组件,定义组件之后,会通过路由将组件显示出来,并且不用再注册组件
3)name命名,再路径较为麻烦并且不好记的时候,可以为路由命名,方便之后的路由跳转
4)redirect重定向,例如:当用户想要访问/a的时候,但是redirect:'/b',那么url就会被替换为/b,然后匹配路由为/b,显示的内容也是/b路径下的内容。
redirect重定向多用于为空白的根路径添加默认打开页面
let router = new VueRouter({
//设置路由的配置,path、component、name
routes:[
//【/】表示根路径,redirect重定向到/a下
{path:'/',redirect:'/a'},
//定义组件component,为/a路径命名name:'comA'
{path:'/a',component:comA,name:'comA'},
//alias别名,当访问/a的时候,url上保持为/a,但是路由匹配的是/b,显示的也是/b中的内容
{path:'/b',component:comB,alias:'/a'}
]
})
3.注册路由,再vue实例中进行注册
let vm = new Vue({
el:'#app',
data:{},
//注册组件
//components:{ myCom:component },
//注册路由
router //router:router
})
4.路由的使用以及加载相应组件
<body>
<div id="app">
<!-- 路径的链接 实现路由的跳转 -->
<router-link to='/a'></router-link>
<!-- 路由视口 用来加载对应的组件 -->
<router-view></router-view>
</div>
</body>
动态路由
- 当需要将某种模式 匹配到的所有路由全部映射到同个组件时候,就可以使用到动态路由。
- 动态路由的动态路径参数以【:】开头
- 当匹配到一个路由时候,参数值会被设置到this.$route.params中
1.设置动态路由,运用【:】
let router = new VueRouter({
routes:[
{path:'/user/:username/:id',component:comU}
]
})
2.在模板中添加路由信息
<router-link to="/user/zhangsan/1001"></router-link>
3.获取路由携带参数并且对参数进行监听
//声明组件comU
let comU = {
data(){
return{
id:null,
username:null
}
},
//template中保存html模板
template:``,
//在created钩子函数中调用对应的属性
created(){
//匹配到一个路由的时候,参数值会被设置到this.$route.params中
this.id = this.$route.params.id;
this.username = this.$route.params.username;
},
//设置监听
watch(){
$route(to,from){
this.id = to.params.id;
this.username = to.params.username;
}
}
}
很明显,有了动态路由我们就能够根据链路和节点的变化适时的进行自动调整,可以动态的传递参数来达到页面的跳转。
下列是有关于动态路由学习的完整代码块,此代码仅供参考:
<body>
<div id="app">
<!-- 调用路由 动态传递路由参数 /user/id/1001/username/zhangsan --> <!-- 其中 1001和zhangsan 就是动态路由参数,可以动态进行更改-->
<router-link to="/user/id/1001/username/zhangsan"></router-link>
</div>
<script>
//声明组件
let user = {
data(){
return{
//路由中动态传递的参数在组件的data数据模型中进行声明
id:null,
username:null
}
},
methods:{},
template:`
<div>
我是A组件
{{id}}
{{username}}
</div>
`,
created(){
this.id = this.$route.params.id
this.username = this.param.username
},
//对动态参数进行监听
watch:{
$route(to,from){
this.id = to.params.id
this.username = to.params.username
}
}
}
//声明路由
let router = new VueRouter({
routes:[
//【:】表示的是动态路径,作为一个路径参数,可以动态传参
{path:'/user/id/:id/username/:username',component:user}
]
})
//声明vue实例,注册路由
let vm = new Vue({
el:'#app',
data:{},
methods:{},
create(){},
router //router:router
})
</script>
</body>