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>
链接到命名路由
constrouter=newVueRouter({routes:[{path:'/user/:userId',name:'user',component:User}]})
<router-link:to="{ name:'user', params: { userId: 123 }}">User</router-link>
路由器都将导航到路径/user/123
完整例子：https://github.com/vuejs/vue-router/blob/dev/examples/named-routes/app.js
-
name属性设置路由视图名字－－无名字默认default
<router-view name=‘page’></router-view>
多个视图都要加载（单组件加载时使用component不需要使用components）
{ path:'/index',name:'index',
components:{default:index,page:about}
},
编程式路由
router.push({name:'user',params:{userId:123}})
路由的重定向和别名
重定向也在routes配置中完成。要重定向/a到/b：
constrouter=newVueRouter({routes:[{path:'/a',redirect:'/b'}]})
重定向也可以定位到命名路线：
constrouter=newVueRouter({routes:[{path:'/a',redirect:{name:'foo'}}]})
别名
重定向意味着用户访问时/a，URL将替换为/b，然后匹配为/b。但是什么是别名？
的别名，/a如/b用户访问时表示/b，该网址仍/b，但如果用户访问过它会被匹配/a。
以上可以在路由配置中表示为：
constrouter=newVueRouter({routes:[{path:'/a',component:A,alias:'/b'}]})
别名使您可以自由地将UI结构映射到任意URL，而不是受配置的嵌套结构约束。
