2022/9/5 嵌套路由(靠路由在vue里渲染套渲染)，动态路由匹配以及开启propos配置动态路由

嵌套路由

通过路由实现组件的嵌套展示

在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才是完整 -->