vue路由

一.vue-router

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

        SPA应用：

                        单页Web应用

                        整个页面只有一个完整页面

                        点击导航链接不会刷新页面，只做局部刷新

                        数据通过ajax获取

路由导航包括

        1.声明式路由导航：router-link

        2.编程式路由导航：this.$router

二.基本使用

        一.声明式路由导航（一级路由）

        1.安装vue-router,2022年以后默认是vue-router4，但只能在vue3中使用，如果使用的是vue2的话需要指定版本

npm i vue-router@3

        2.在main.js里引入

//引入路由
import VueRouter from 'vue-router';
//应用插件
Vue.use(VueRouter)

        3.新建router文件夹及index文件，在components文件夹里新建两个测试文件，

//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";

//引入组件
import router1 from "../components/router1";
import router2 from "../components/router2";
//创建并暴露一个路由器
export default  new VueRouter({
    //key,value值
    routes:[
        {
            path:'/router1',
            component:router1
        },
        {
            path:'/router2',
            component:router2
        }
    ]
})

         4.再次回到main.js引入router并使用

import Vue from 'vue'
import App from './App.vue'
//引入路由
import VueRouter from 'vue-router';

import router from './router'
Vue.config.productionTip = false

//应用插件
Vue.use(VueRouter)
new Vue({
  render: h => h(App),
  router:router
}).$mount('#app')

5.在页面运用（声明式路由导航）

<!-- 引入点击链接，实际上是包装过后的a标签 -->
<router-link to="/router1">router1</router-link>
<router-link to="/router2">router2</router-link>

<!-- 展示的地方 -->
<router-view></router-view>

结果：

        二.编程式路由导航（）

        1.绑定事件函数

        2.$router的API（可以直接打印出来看）

        this.$router.push(name:"...",params:{test:'...'})

                name是命名式路由，params是传参，query也可以，二者区别不做介绍

        this.$router.replace()

        this.$router.go()    //可正可负，括号内为需要跳转的步数

        this.$router.back()   //回退一步，与go(-1)同理

        this.$router.forward()  //前进

        3.在跳转后的页面内

        跳转并不会造成刷新，所以不会重新渲染dom，因此mounted函数不会奏效，可以考虑使用其他生命周期函数，或者在watch里面开展监视$route,使其每次检测到路由改变都初始化需要刷新的函数（建议设置属性immediate:true，不然第一次不会刷新）

        this.$route.params.test就可以获得之前传递的参数