1.路由跳转
<router-link to="/home">静态路由跳转</router-link>
this.$router.push('/home')
this.$router.replace('/home')
2.动态路由传参
方法1.params
first.在router中的路由映射
{ path: '/login/:id/:name',name: 'Login',component: Login }
1.
<router-link :to="{name:'Login',params:{id:'110',name:'pourgay'}}">动态路由传参1</router-link>
2.
<Button type="primary" @click="changeRoute1(110,‘pourgay’)">动态路由传参2</Button>
changeRoute1(val) {this.$router.push({name: 'Login',params: {id: val}})}
3.
<Button type="primary" @click="changeRoute2(110,‘pourgay’)">动态路由传参3</Button>
changeRoute2(val) { this.$router.push({ path: `/Login/${val}`}) }
then.接收参数
<p>{{ $route.params.id }}--{{ $route.params.name }}</p>
方法2.query
first.在router中正常配置
1.
<router-link :to="{path:/login',query:{id:'110',name:'pourgay'}}">动态路由传参1</router-link>
2.
<Button type="primary" @click="changeRoute1(110,‘pourgay’)">动态路由传参2</Button>
changeRoute1(val) {this.$router.push({name: 'Login',query: {id: val}})}
3.
<Button type="primary" @click="changeRoute2(110,‘pourgay’)">动态路由传参3</Button>
changeRoute2(val) { this.$router.push({ path: `/Login/${val}`}) }
then.接收参数
<p>{{ $route.query.id }}--{{ $route.query.name }}</p>
3.路由懒加载
{ path: '/login/:name', name: 'Login', component: () => import('../views/Login.vue') }
4.路由嵌套
{ path: '/login/:name', name: 'Login', component: () => import('../views/Login.vue'), children: [ { path: '/news', component: ()=> import('../views/News.vue') }, { path: '/like', component: ()=> import('../views/Like.vue') } ] }
5.路由守卫
在router中配置 { path: '/', name: 'Home', component: Home, meta: { title: '主页' } } 前置守卫 router.beforeEach((to, from, next) => { document.title = to.matched[0].meta.title next() }) 后置守卫 router.afterEach((to, from) => { // ... })