Vue路由知识

1.作用
将不同的url对应不同的组件 ，比较适合单页面开发
vue-router是vue的一个插件，需要安装使用
2.安装
1.cdn
2.npm
3.vue-router.js
3.基本使用

new Vue({
    components:{
        "student":{
            template:``
        }
    }
});
1.定义组件
     var student={
         template:``
     }
2.定义路由
    var router=new VueRouter({
        routes:[{
            path:'/student',
            component:student
        },{}]
    })
3.挂载路由到vue实例
    new Vue({
        el:'#app',
        router
    });

4.router-link标签中的to属性

<router-link :to=’{path:’/student’}’>
通过query传递参数，参数会拼接到地址栏
获取参数：在当前组件中使用$route.query<router-link:to{=}^{\prime }{path{:}^{\prime }/studen{t}^{\prime },query:id:1}^{\prime }></router-link>通过params传递参数获取参数：在当前组件中使用$route.params
如果使用parmas发送参数，需要使用路由名称进行跳转
<router-link :to=’{name:‘student’,params:{id:1}}’>

5.命名路由+重定向
var router=new VueRouter({
routes:[{
path:’/student’,
name:“student-a”,//给路由命名，发便路由跳转传参
component:student
},{
path:’/teacher’,
name:‘teacher-a’,
component:teacher
}]
});

6.动态路由
动态路由类似新闻详情页
只需要开发一次，传递不同参数，加载不同内容
参数使用:连接
path:’/details:id’

默认情况下，由于vue的高效率渲染机制，不会将同一个组件进行销毁并重新加载
导致生命周期钩子函数不会反复执行

监听$route

7.嵌套路由-多级路由
路由父子关系
1.创建子组件
2.嵌套router-link标签
并且嵌套router-view
3.在路由中new VueRouter()给当前路由添加子路由阿属性
children:[{
path:’/a’,
component:a
},{}]

最后

以上就是爱笑宝贝为你收集整理的Vue路由知识的全部内容，希望文章能够帮你解决Vue路由知识所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。