嵌套路由
通过路由实现组件的嵌套展示
在about内嵌套路由
<template><div class="about-container"><h3>About 组件</h3><!-- 子级路由链接 --><router-link to="/about/tab1">tab1</router-link><router-link to="/about/tab2">tab2</router-link><hr><!-- 子级路由占位符 --><router-view></router-view></div></template>在router的indexjs（包含重定向）
{path : '' , component : Tab1}, 为默认子路由可以不使用重定向，
使用默认子路由可以将<router-link to="/about">tab1</router-link> about后省略
import Vue from "vue";import VueRouter from "vue-router";import Home from '../components/Home.vue'import Movie from '../components/Movie.vue'import About from '../components/About.vue'import Tab2 from '../components/tabs/Tab2.vue'import Tab1 from '../components/tabs/Tab1.vue'Vue.use(VueRouter)const router = new VueRouter({//router是一个数组，定义hash地址和组件之间的关系routes : [//重定向路由规则{path : '/', redirect :'/home'},{path : '/home', component:Home},{path : '/movie', component:Movie},{path : '/About', component:About , children : [ {path : '' , component : Tab1},{path : 'tab2' , component : Tab2} ]}]})export default router
动态路由匹配
this.$route是路由的参数对象
this.$router是路由的导航对象
APP.vue
<router-link to="/movie/1">洛基</router-link><router-link to="/movie/2">雷神</router-link><router-link to="/movie/3">蜘蛛侠</router-link>router内index.js
//需求：在movie组件中，根据id值展示对应详情信息{path : '/movie/:id', component:Movie},
为路由器开启props传参
router的index
{path : '/movie/:mid', component:Movie , props:true},movie.vue
<script>export default {name: 'Movie',//接受props数组props : ['mid'],methods : {shouTimes(){console.log(this)}}}</script>
<!-- 在哈希地址中 / 后面的参数项叫路径参数 -->
<!-- 在路由参数对象中使用this.$route.params来访问 -->
<!-- 在哈希地址中 ? 参数是 查询参数 -->
<!-- 在路由 参数对象 中，需要使用this.$route.query来访问查询参数 -->
<!-- 在this.$route中path只是路径部分，full.path才是完整 -->
