动态路由
动态路由一般用来匹配路由规则,只要符合就会跳转到响应的组件路由中,在path路径中使用 :id 也可以不设置成id,只是个名字而已。只要符合匹配原则即可,匹配路由的匹配项存放在 this.$route.params 对象下。
在app.vue文件中写入相关要匹配的路由
<template>
<div id="App">
<a href="#/home/1">首页</a>
<a href="#/home/2">首页1</a>
<a href="#/home/3">首页2</a>
<a href="#/move">关于</a>
<hr />
<router-view></router-view>
</div>
</template>
<script>
export default {}
</script>
<style></style>
在router的index.js路由文件中配置匹配路由,其实也就是在 /home/:id。
//导入vue和router包
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/components/home.vue'
import Auto from '@/components/auto.vue'
//添加子路由的文件路径
import Tab from '@/components/tab/tab.vue'
//导入Vue.use()的函数,将vueRouter设置为vue插件
Vue.use(VueRouter)
//创建vueRouter的实例对象
const router = new VueRouter({
routes: [
{ path: '/', redirect: '/home' },
//匹配路由路径,id只是个名字而已,主要是路径的配对
{ path: '/home/:id', component: Home },
{ path: '/move',
component: Auto,
//第一种方法是重定向
//redirect: '/move/tab'
children: [
//子路由规则,可以在path路由路径上不加/
//第二种方法是将默认子路由的path设置为空即可,他会直接跳转到这个路由上
{ path: '', component: Tab }
]
}
]
})
//导出router
export default router
为路由开启props传参
在上面,使用this.$route.params.匹配项 就可以拿到参数项,但是这样很麻烦,在以后的开发中,使用props实现匹配项的传递,但必须是在路由的组件中使用否则不起作用。
//导入vue和router包
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/components/home.vue'
import Auto from '@/components/auto.vue'
//添加子路由的文件路径
import Tab from '@/components/tab/tab.vue'
//导入Vue.use()的函数,将vueRouter设置为vue插件
Vue.use(VueRouter)
//创建vueRouter的实例对象
const router = new VueRouter({
routes: [
{ path: '/', redirect: '/home' },
{ path: '/home/:id', component: Home, props:true },
{ path: '/move',
component: Auto,
//第一种方法是重定向
//redirect: '/move/tab'
children: [
//子路由规则,可以在path路由路径上不加/
//第二种方法是将默认子路由的path设置为空即可,他会直接跳转到这个路由上
{ path: '', component: Tab }
]
}
]
})
//导出router
export default router
必须在导入的home组件中使用,在其他组件中不起作用,其实也就是自定义属性,自定义属性里面必须是匹配项中的id, :id 。否则不起作用。