05.路由.jpg

各个知识点整理：

1.重定向

router/index.js：

  {
    path: '',
    redirect: '/Menu'
  },
  {
    path: '/Menu',
    name: 'Menu',
    component: () => import('../views/Menu.vue')
  },

2.子路由与具名路由

router/index.js：

{// 亲路由
    path: '/parent',
    name: 'parent',
    component: () => import('../views/pcview/Parent.vue'),
    children: [
      {// 子路由
        path: 'child1',
        name: 'child1',
        components: {
          default: import('../views/pcview/children/Child1.vue'),
          // 具名路由
          middle: () => import('../components/common/Middle.vue'),
          // 具名路由
          right: () => import('../views/pcview/children/Child1Prop.vue')
        }
      },
      {// 子路由
        path: 'child2',
        name: 'child2',
        components: {
          default: import('../views/pcview/children/Child2.vue'),
          // 具名路由
          middle: () => import('../components/common/Middle.vue'),
          // 具名路由
          right: () => import('../views/pcview/children/Child2Prop.vue')
        }
      }
    ]
  }

Menu.vue：
<router-link to="/parent/child1">child1</router-link>
      Parent.vue：
        <tab-bar
            title="TabBarTitle:"
            :paths="['/parent/child1','/parent/child2']"
            :tab-names="['子1','子2']">
             <template v-slot:left>
                <keep-alive>
                    <router-view name="Left"/>
                </keep-alive>
            </template>
            <template v-slot:middle>
                <keep-alive>
                    <router-view name="middle"/>
                </keep-alive>
            </template>
            <template v-slot:right>
                <keep-alive>
                    <router-view name="right"/>
                </keep-alive>
            </template>
        </tab-bar>
        <keep-alive>
            <router-view></router-view>
        </keep-alive>

路由匹配过程：

1.在Menu.vue的显示画面点击child1
2.根据路径/parent/child1中的parent找到router/index.js中定义的画面
component: () => import('../views/pcview/Parent.vue'),
3.Parent.vue 中上方显示tabbar，下方定义显示子路由画面
<router-view></router-view>
4.根据路径/parent/child1找到router/index.js中定义的子路由画面child1为
default: import('../views/pcview/children/Child1.vue')
5.Parent.vue 中tabbar部分指定具名路由<router-view name="right"/>
6.根据路径/parent/child1找到router/index.js中定义的子路由中具名路由画面为
right: () => import('../views/pcview/children/Child1Prop.vue')
7.匹配结束显示画面

3.路由传参

3.1. router-link

<router-link to="/componentStudy" custom v-slot="{ navigate }" replace>
  <button @click="navigate" @keypress.enter="navigate" role="link">组件学</button>
</router-link>

3.2. 代码触发

this.$router.replace({
  name: router/index.js中定义的路由名,
  query|params: {
    key: value
  }
})

3.3. 取参：

this.$route.query|params.key

注意，route为当前路由对象，router为路由控制器

4. keep-alive

keep-alive是Vue提供的一个抽象组件，用来对组件进行缓存，从而节省性能
当组件在keep-alive内被切换时组件的activated、deactivated这两个生命周期钩子函数会被执行

控制组件刷新：

4.1.利用include、exclude属性

<keep-alive include="aaa,bbb">
  <router-view></router-view>
</keep-alive>

<keep-alive exclude="ccc">
  <router-view></router-view>
</keep-alive>

4.1.2.利用meta属性

{
  path:'/',
  name:'home',
  components:Home,
  meta:{
    keepAlive:true|false
 },
<keep-alive>
  <router-view v-if="this.$route.meat.keepAlive"></router-view>
</keep-alive>

5. VUE的两种跳转push和replace对比区别 （默认为push）

push会向 history 栈添加一个新的记录，当用户点击浏览器后退按钮时，则回到之前的 URL
replace不会留下 history 记录。即使点击返回按钮也不会回到这个页面。