vue 动态路由

动态路由

动态路由一般用来匹配路由规则，只要符合就会跳转到响应的组件路由中，在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 。否则不起作用。