Vue-Router(前端路由)基础

Router

安装

npm i vue-router -S
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

动态路由

模式	匹配路由	$route.params
/user/:username	/user/evean	{ username:'evan' }
/user/:username/post/:post_id	/user/evean/post/123	{ username:'evan', post_id:'123' }

---

嵌套路由

routes: [
	path: '/path',
	name: 'name',
	component,
	children: [{
		path: 'title0', // 相对路径
		name: 'title0',
		component: Title0
	}]
]

编程式路由

// 加参数的形式
this.$router.push({path:'name?a=123'})
this.$router.push({path:'name',query:{a:123}})

// 接收参数,与组件之间的params不一样
{{ $route.query.a }}

命名路由&命名视图

	<router-view></router-view>
	<router-view name="name1"></router-view>
	<router-view name="name2"></router-view>

	routes: [{
		path: '/',
		name: 'List',
		components: {
			name1: name1,
			name2: name2
		}
	}]

其他

• 别名 : alias

进阶篇 - >