标签：pre round http 历史 color 核心 replace com template
Vue2.0 路由
基本使用：
1.布局
跳转链接
<router-link to=‘/home‘>主页</router-link>
<router-link to=‘/news‘>新闻</router-link>
展示
<router-view></router-view>
2.路由具体写法
1.//组件
var Home={
template:‘<h3>我是主页</h3>‘
}
var News={
template:‘<h3>我是新闻</h3>‘
}
2.//配置路由
var routes=[
{path:‘/home‘,component:Home},
{path:‘/news‘,component:News}
]
3.//生成路由实例
var router =new VueRouter({
routes
})
4.//最后挂到vue上
new Vue({
router,
el:‘#box‘
})
3.重定向
var routes=[
{path:‘/home‘,component:Home},
{path:‘/news‘,component:News},
{path:‘*‘,redirect:‘/news‘}
]
vue1.0：router.rediect 废弃了
路由嵌套
//跳转链接 <ul> <li><router-link to=‘/user/username‘>123</router-link></li> </ul>
配置路由
核心：子路由children
var routes=[
{path:‘/home‘,component:Home},
{path:‘/user‘,
component:User,
children:[
{path:‘username‘,component:UserDetail}
]
},
{path:‘*‘,redirect:‘/home‘}
]
组件
var UserDetail={
template:‘<span>我是用户a</span>‘
}
路由传参
跳转链接
<ul>
<li><router-link to=‘/user/strive/age/10‘>strive</router-link></li>
<li><router-link to=‘/user/blue/age/50‘>blue</router-link></li>
<li><router-link to=‘/user/red/age/80‘>red</router-link></li>
</ul>
<div>
<router-view></router-view>
</div>
配置路由：
var routes=[
{path:‘/home‘,component:Home},
{path:‘/user‘,
component:User,
children:[
{path:‘:username/age/:age‘,component:UserDetail}
]
},
{path:‘*‘,redirect:‘/home‘}
]
组件:
var UserDetail={
template:‘<span>{{$route.params}}</span>‘
}
页面：
路由实例方法:
router.push({path:‘home‘}); //直接添加一个路由,表现切换路由，本质往历史记录里面添加一个
router.replace({path:‘news‘}) //替换路由，不会往历史记录里面添加
标签：pre round http 历史 color 核心 replace com template
原文地址：http://www.cnblogs.com/Abner5/p/6852405.html
