Vue中的路由

1.相关理解

1.1 vue-router的理解

        vue的一个插件库，专门用来实现SPA应用

1.2 对SPA应用的理解

1. 但也Web应用
2. 整个应用只有一个完整的页面
3. 点击页面中的导航链接不会刷新页面（而类似于a标签则会默认刷新页面），指挥做页面的局部更新
4. 数据需要通过ajax请求来获取

1.3 路由的理解

路由

1. 理解：一个路由（route）就是一组映射关系（key-value），多个路由需要看路由器（router）进行管理
2. 前端路由：key是路径，value是路由组件

基本使用

1. 安装vue-router，命令：npm i vue-router
2. 应用插件：Vue.use(VueRouter)
3. 编写路由配置

import Vue from 'vue'
//引入vueRouter
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About

  }
]
//创建router示例对象，去管理一组一组的路由规则
const router = new VueRouter({
  routes
})

//暴露router
export default router

几个注意点

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

使用

1. 配置路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import New from '../views/News.vue'


Vue.use(VueRouter)

const routes = [{
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    component: About,
    children: [{//通过children配置子级路由
      path: 'news',//此处不要写成：/news
      component:News
    }]
  }
]

const router = new VueRouter({
  routes
})

export default router

 2.显示路由

 3.跳转的时候需要写完整的路径

<router-link to="/about/news">news</router-link>

 路由传递参数（两种方式）

• About路由组件页面

<template>
  <div class="about">
<!-- 向news路由传递参数-->
    <router-link to="/about/news">news</router-link>|
    <ul>
      <li v-for="m in list" :key="m.id">
        <router-link :to="{
          path:'/about/news',
          query:{
            id:m.id,
            name:m.name
          }

        }">{{m.name}}</router-link>
      </li>
    </ul>
    <router-view />
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: "haung" },
        { id: 2, name: "xu" },
        { id: 3, name: "hu" }
      ]
    };
  }
};
</script>

•  News路由组件页面

<template>
  <div>
    <ul>
      <li>hi:{{this.$route.query.id}}我是{{this.$route.query.name}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted(){
      console.log(this.$route)
  }
};
</script>

<style>
</style>

• 结果

 

 简化路由跳转的路径

• 之前我们在<router-link>中携带的路径是完整的path路径，接下我们可以为路由定义name，

路由的第二种传递参数的方法（params参数）

<router-link>的replace属性

1. 作用：控制路由跳转时操作浏览器历史记录的模式
2. 浏览器的历史记录模式有两种写入方式，分别为push和replace，push时追加历史记录，replace时替换历史记录，路由跳转的时候默认时push
3. 如何开启replace模式：<router-link replace to=""></router-link>

编程式导航

1. 作用：不借助<router-link>实现路由跳转，让路由跳转更加灵活
2. 具体编码：

   //route的两个API
    this.$router.push({
      name: "about",
      params: {
        id: xxx,
        title: "xxx"
      }
    });

    this.$router.replace({
      name: "about",
      params: {
        id: xxx,
        title: "xxx"
      }
    });

    this.$router.forward()//前進
    this.$router.back()//後退
    this.$router.go()//可前進可後退，可傳入數字類型的參數

緩存路由組件

1. 作用：讓不展示的路由保持挂載，不被销毁（我们知道，每当我们切换路由的时候，被切换的路由时默认被销毁的，因此你再次切回来的时候，是不会保持原来你浏览的记录的）
2. 具体编码

 由緩存路由組件引申出的两个新的声明周期钩子

1. 作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态
2. 具体名字

                activated：路由组件被激活时触发

                deactivated：路由组件失活时被触发