vue 路由使用

一、
Vue-router.min.js
路由路径由 <router-link></router-link>标签配置 标签内 to属性值规定改标签指向的path路径

<router-link to="/home">去首页</router-link>
<router-link to=“/news”>去新闻</router-link>

路由对应视图 通过加载组件 加载到<router-view></router-view>上

二、

配置路由的步骤：
1）定义组件－－（试图加载的内容组件）
Eg：

var Home={
    template:'<div>这是一个首页的页面</div>'
}

2）配置路由 定义路由

Path 属性 配置路由地址 “＊”默认路径下 redirect 属性配置路由重定向
component 属性 配置改地址需要加载的组件视图

Eg：

var  routes=[
        {path:'/home',component:Home},
        {path:'/news',component:News},
        { path: '*', redirect: '/news' }  /*路由的重定向*/
    ]

3）实例化VueRouter

    var  router=new VueRouter({   /*router 老老实实的写这个名字*/
        routes:routes   /*VueRouter里面的属性名称不能变  routes  */
    })

4）VueRouter挂载到Vue实例上面去

var app=new Vue({
        router:router,
        el:'#out'
    })

存储路径参数 path：“／index／：id”

获取 $route.params.id

三、

路由嵌套 配置规则

1）
父级路由

<router-link to="/home">首页</router-link>
<router-link to=“/user”>用户</router-link>
<router-view></router-view>

子路由

<template id="user">
    <div>
        <router-link to="user/username">去子路由</router-link>
        <!--子路由视图显示的地方-->
        <router-view></router-view>
    </div>
</template>

2）配置路由 定义路由

子路由配置

        {
            path:'/user',component:User,
            'children':[   /*定义自组件的路由*/
                {
                    path:'username',component:UserName,    /*注意：子路由前面的斜杠*/
                }
            ]
        },

其他步骤一样

四、

子路由储存参数

'children':[
                {path:':aa',component:aaa}
            ]

$route.params.aa取值

同路由内，视图切换通过watch检测路由参数更改

watch:{
    '$route'(to,from){

    }
}

子路由 重定向路径－－默认显示

{path:‘/about’,redirect:‘/about/0’}

意思：当路径为/about 时 自动指向 /about/0

五、

路由命名

路径的另一种定义方式 绑定属性to 对象 name的值为设置的路由路径
<router-link :to=“{name:‘index’}”>首页</router-link>

name属性设置路由视图名字－－无名字默认default
<router-view name=‘page’></router-view>

多个视图都要加载

{       path:'/index',name:'index',
    components:{default:index,page:about}
},

六、
query传参

 <router-link :to="{path:'/about',query:{id:'123'}}"> 关于</router-link>
//传递参数

  mounted(){
            console.log(this.$route.query.id)
        }
//接收参数