Vue学习笔记(四)——Vue路由

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.路由的使用以及加载相应组件

动态路由

• 当需要将某种模式 匹配到的所有路由全部映射到同个组件时候，就可以使用到动态路由。
• 动态路由的动态路径参数以【：】开头
• 当匹配到一个路由时候，参数值会被设置到this.$route.params中

1.设置动态路由，运用【：】

let router = new VueRouter({
    routes:[
        {path:'/user/:username/:id',component:comU}
    ]
})

2.在模板中添加路由信息

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;
        }
    }
}

很明显，有了动态路由我们就能够根据链路和节点的变化适时的进行自动调整，可以动态的传递参数来达到页面的跳转。

下列是有关于动态路由学习的完整代码块，此代码仅供参考：