Vue2.0

Posted 2020-09-18 李大白

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

 

 

<input type="checkbox" v-model="toggle" v-bind:true-value="a" v-bind:false-value="b">
//当选中时 vm.toggle === vm.a
//当没选中时 vm.toggle === vm.b