【Vue】Vue2.0+Vue3.0学习笔记day12（路由）

目录

117.路由的简介

118.路由的基本使用

119.几个注意点

120.嵌套（多级）路由

121.路由的query参数

122.命名路由

123.路由的params参数

124.路由的props配置

125.router-link的replace属性

126.编程式路由导航

127.缓存路由组件

128.两个新的生命周期钩子

129.全局前置路由守卫

130.全局后置路由守卫

131.独享路由守卫

132.组件内路由守卫

133.history模式与hash模式

134.element-ui基本使用

135.element-ui按需引入

---

117.路由的简介

 

 

 

118.路由的基本使用

   首先安装vue-router

npm i vue-router

    新建src/router/index.js文件

// 该文件专门用于创建整个应用的路由器

import vueRouter from 'vue-router'
// 引入组件
import About from '../components/About'
import Home from '../components/Home'

// 创建并暴露一个路由器
export default new vueRouter({
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home
        },
    ]
})

    在main.js中引入

// 引入vue
import Vue from 'vue'
// 引入App组件，它是所有组件的父组件
import App from './App.vue'
// 引入vue-router
import vueRouter from 'vue-router'
// 引入路由器
import router from './router/index'

// 关闭vue的生产提示
Vue.config.productionTip = false
// 应用插件
Vue.use(vueRouter)

// 创建vue的实例对象--vm
new Vue({
  // 将App组件放入容器中
  render: h => h(App),
  router
}).$mount('#app')

<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" href="./about.html">About</a>
          <a class="list-group-item active" href="./home.html">Home</a> -->

          <!-- Vue借助router-link标签实现路由的切换 -->
          <router-link class="list-group-item" active-class="active" to="/about">About</router-link>
          <router-link class="list-group-item" active-class="active" to="/home">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",
}
</script>

<template>
    <div>
       <h2>我是About的内容</h2>  
    </div>
</template>

<script>

export default {
    name:'About',
  
    
}

<template>
  <div>
    <h2>我是Home的内容</h2>  
  </div>
</template>

<script>

export default {
    name:'Home',
   
}
</script>

119.几个注意点

## 路由几个注意点
   1.路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹
   2.通过切换，“隐藏”了路由组件，默认是被销毁掉的，需要的时候再挂载
   3.每个组件都有自己的$route属性，里面存储着自己的路由信息
   4.整个应用只有一个router，可以通过组件的$router属性获取到

    新建文件夹pages把About和Home组件移到pages，在router/index.js改一下引入路径

// 引入组件
import About from '../pages/About'
import Home from '../pages/Home'

   然后在components下新建组件Banner.vue

<template>
  <div>
    <div class="col-xs-offset-2 col-xs-8">
        <div class="page-header"><h2>Vue Router Demo</h2></div>
    </div>
  </div>
</template>

<script>
export default {
    name:'Banner'
}
</script>

<template>
  <div>
    <div class="row">
      <Banner></Banner>
    </div>
    <div class="row">
      <div class="col-xs-2 col-xs-offset-2">
        <div class="list-group">
            <!-- 原始HTML中使用a标签实现页面的跳转 -->
          <!-- <a class="list-group-item" href="./about.html">About</a>
          <a class="list-group-item active" href="./home.html">Home</a> -->

          <!-- Vue借助router-link标签实现路由的切换 -->
          <router-link class="list-group-item" active-class="active" to="/about">About</router-link>
          <router-link class="list-group-item" active-class="active" to="/home">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>
import Banner from "./components/Banner.vue";
export default {
  name: "App",
  components:{Banner}
}
</script>

120.嵌套（多级）路由

 

   在pages下新建两个组件Message和News

<template>
   <div>
      <ul>
        <li>
          <a href="/message1">message001</a>&nbsp;&nbsp;
        </li>
        <li>
          <a href="/message2">message002</a>&nbsp;&nbsp;
        </li>
        <li>
          <a href="/message3">message003</a>&nbsp;&nbsp;
        </li>
      </ul>
    </div>
</template>

<script>
export default {
    name:'Message'
}
</script>

<template>
   <div>
      <ul>
        <li>news001</li>
        <li>news002</li>
        <li>news003</li>
      </ul>
    </div>
</template>

<script>
export default {
    name:'News'
}
</script>

// 该文件专门用于创建整个应用的路由器

import vueRouter from 'vue-router'
// 引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import Message from '../pages/Message'
import News from '../pages/News'

// 创建并暴露一个路由器
export default new vueRouter({
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home,
            children:[
                {
                    path:'news',
                    component:News
                },
                {
                    path:'message',
                    component:Message
                },
            ]
        },
    ]
})