Vue 08 路由使用、注意点 多级路由 query、params参数 props配置 replace属性 编程式、缓存路由 新钩子 前置、后置、独享、组件内路由守卫 history、hash模式

路由的简介

vue-router是vue的一个插件库，专门实现单页面应用。例如点击导航区，切换内容区。

单页面应用：

 路由的理解：

 路由的基本使用

需求：点击不同的按钮，切换不同的路径和内容。(单页面应用)

 Index.js:

//该文件用于创建整个应用的路由器
//引入VueRouter
import VueRouter from 'vue-router';
//引入组件
import AboutCom from '../components/AboutCom.vue';
import HomeCom from '../components/HomeCom.vue';
//创建并暴露一个路由器
export default new VueRouter({
    routes:[
        {
            path:'/AboutCom',
            component:AboutCom
        },
        {
            path:'/HomeCom',
            component:HomeCom
        },
    ],
});

App.vue:
 

<template>
   <div>
    <div class="row">
      <div class="col-xs-offset-2 col-xs-8">
        <div class="page-header"><h2>Vue Router Demo</h2></div>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-2 col-xs-offset-2">
        <div class="list-group">
          <!-- 原始html中使用a标签进行跳转
          <a class="list-group-item active" href="./about.html">About</a>
          <a class="list-group-item" href="./home.html">Home</a>
          -->
          <!--router-link实现路由的切换-->
          <router-link class="list-group-item" active-class="active" to="/aboutCom">About</router-link>
          <router-link class="list-group-item" active-class="active" to="/HomeCom">Home</router-link>
        </div>
      </div>
      <div class="col-xs-6">
        <div class="panel">
          <div class="panel-body">
            <!--指定组件的呈现位置-->
            <router-view></router-view>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>


export default {
  name: "App",

  components: {
    
    
  },
};
</script>



<style>

</style>

几个注意点

1.把顶部也写成一个组件。

此时BannerCom是一般组件:引入，注册，组件标签。

HomeCom、AboutCom是路由组件：点击路由链接，修改路径，前端路由器监测到变化，根据匹配规则选择对应的组件，渲染在指定的位置。

把路由组件放在pages，一般组件放在components里。

2.当点击Aboout组件时，Home组件被销毁了。

当没有点击路由链接的时候：组件都没被挂载或销毁。

 当第一次点击About组件的时候：About组件挂载完毕。

 然后点击Home组件的时候：About组件销毁，Home组件挂载。

 3.vc上多了两个属性。vc参与了路由的配置。

$route每个vc都不一样。  $router是同一个。