vue 路由使用

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

去首页
去新闻

路由对应视图 通过加载组件 加载到上

二、

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

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

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）
父级路由

首页
用户

子路由

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的值为设置的路由路径
首页

name属性设置路由视图名字－－无名字默认default

多个视图都要加载

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

六、
query传参

  关于
//传递参数

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