首页 > 代码库 > Vue2.0

Vue2.0

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‘}) //替换路由,不会往历史记录里面添加                            

 

Vue2.0