一起从零开始学VUE（11）路由与动态路由

什么是路由

路由就是对应关系，即地址与组件之间的对应关系，前端路由指的就是hash地址与组件之间的对应关系

前端路由的工作方式

1. 用户点击了页面上的路由链接
2. 导致了URL地址栏中的Hash值发生了变化
3. 前端路由监听到了Hash地址的变化
4. 前端路由把当前Hash地址对应的组件渲染到浏览器中
   

实现简易的前端路由

<template>
  <div class="app-container">
    <h1>App 根组件</h1>

    <a href="#/home">首页</a>
    <a href="#/movie">电影</a>
    <a href="#/about">关于</a>
    <hr />
    <component :is="comName"></component>
  </div>
</template>

<script>
// 导入组件
import Home from '@/components/Home.vue'
import Movie from '@/components/Movie.vue'
import About from '@/components/About.vue'

export default {
  name: 'App',
  data(){
    return {
      comName: "Home"
    }
  },
  // 注册组件
  components: {
    Home,
    Movie,
    About
  },
  created () {
    // 只要当前的app组件一被创建，就立即监听window对象的onhashchange事件
    window,onhashchange = () =>{
      console.log(location.hash)
      switch(location.hash){
        case "#/home":
          this.comName='Home'
          break
        case "#/movie":
          this.comName = 'Movie'
          break
        case "#/about":
          this.comName = 'About'
          break
      }
    }
  }
    }
</script>

vue-router的基本使用

什么是vue-router

vue-router是vue.js官方给出的路由解决方案，只能接和vue项目进行使用。能够轻松的管理SPA项目中的组件的切换

vue-router安装和配置的步骤

1. 安装vue-router包
   npm i vue-router@3.5.2 -S
2. 创建路由模块：在src源代码目录下，新建router/index.js路由模块，并初始化代码

// 导入Vue和VueRouter的包
import Vue from 'vue'
import VueRouter from 'vue-router'

// 调用Vue.use()函数，把VueRouter安装为Vue的插件
Vue.use(VueRouter)

// 创建路由的实例对象
// routes是一个数组，定义了hash地址与组件之间的关系
const router = new VueRouter()

// 向外共享路由的实例对象
export default router

3. 导入并挂载路由模块

// 导入路由模块，拿到路由实例对象
import router from '@/router/index.js'
new Vue({
  render: h => h(App),
  // router :路由的实例对象
  router
}).$mount('#app')

在进行模块化导入的时候，如果给定的是文件夹，则默认导入这个文件夹下，名字叫做index.js的文件

4. 声明路由链接和占位符
   只要在项目中安装和配置了vue-router就可以使用router-view这个组件，充当占位符

在路由模块中声明路由的对应关系

routes是一个数组，定义了hash地址与组件之间的关系

const router = new VueRouter({
    routes:[
        {path:'/home',component:Home},
        {path:'/movie',component:Movie},
        {path:'/about',component:About}
    ]
})

当安装和配置了vue-router后，可以使用router-link来替代普通的a

    <router-link to="/home">首页</router-link>
    <router-link to="/movie">电影</router-link>
    <router-link to="/about">关于</router-link>

redirect重定向

路由重定向指的是：用户在访问地址A的时候，强制用户跳转到地址C，从而展示特定的组件页面，通过路由规则的redirect属性，指定一个新的路由地址。

嵌套路由

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

通过children属性声明子路由规则

如果通过原来的方式声明路由规则，会发现嵌套无法形成，子路由中的链接会覆盖子级模块，为了解决这种状况，我们需要了解children属性

const router = new VueRouter({
    routes:[
        {path:'/',redirect:"/home" },
        {path:'/home',component:Home},
        {path:'/movie',component:Movie},
        {
            path:'/about',
            component:About,
            children:[
                {path:'tab1',component:tab1},
                {path:'tab2',component:tab2}
            ]
    }
    ]
})

在未点击tab1和tab2的时候，默认是不显示的。如果想要跳转到指定的地址，我们可以利用路由重定向来设置默认显示子组件，也可以使用默认子路由。
默认子路由： 如果children数组中，某个路由规则的path值为空字符串，则这条路由为默认子路由

动态路由匹配

动态路由指的是把hash地址中可变的部分定义为参数项，从而提高路由规则的复用性，使用英文的冒号来定义路由的参数项。

//index.js中
{path:'/movie/:mid',component:Movie},
//如何取值---路由的参数对象
$route.params.mid

也可以使用props:true来开启路由传参，从而方便的拿到路由规则中动态参数的值

{path:'/movie/:mid',component:Movie，props:true},

注意：

1. 在hash地址中，/后面的参数项叫做路径参数
2. 在路由参数对象中，需要使用this.$route.params来访问路径参数
3. 在hash地址中，？后面的参数项叫做查询参数
4. 在this.$route中，path只是路径部分，fullPath是完整的