vue3学习10：路由基本学习（vue-router）基本使用

vue-router 是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用，能够轻松的管理 SPA 项目中组件的切换。
具体代码可以下载：例子代码

第一步：npm install vue-router@next

第二步：vue3设置路由
添加一个src/router/index.js文件

第三步：在index.js从 vue-router 中按需导入两个方法：

import {createRouter,createWebHashHistory} from 'vue-router'

const router = createRouter(
    {
        history:createWebHashHistory(),
        routes:[],
    }
)

export default router

第四步:加几个vue组件进行测试：
HoMe.vue

<template>
  <div>
  <h1>Home</h1>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>

</style>

BookCase.vue

<template>
  <h1>书架</h1>
</template>

<script>
export default {
  name: "BookCase"
}
</script>

<style scoped>

</style>

BookOne.vue

<template>
  <h1>西游记</h1>
</template>

<script>
export default {
  name: "BookOne"
}
</script>

<style scoped>

</style>

Booktwo.vue

<template>
  <h1>红楼梦</h1>
</template>

<script>
export default {
  name: "BookTwo"
}
</script>

<style scoped>

</style>

第五步：在index.vue导入需要使用路由控制的组件，创建路由实例对象，如下：

import {createRouter,createWebHistory} from 'vue-router';
import HoMe from "@/view/HoMe";
import BookCase from "@/view/BookCase";

const routes = [{
    path:'/home',
    component:HoMe
},{
    path: '/bookcase',
    component: BookCase
}
]

const router = createRouter({
    history:createWebHistory(),
    routes,
})

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

在main.vue中导入并挂载路由模块

import { createApp } from 'vue'
import App from './App.vue'
import router from "@/router";


const app=createApp(App)
app.use(router).mount('#app')

在app.vue：

<template>
  <div id="app">
    <h1 style="color: #42b983">Router</h1>
    <router-link to="/home">首页</router-link>&nbsp;&nbsp;
    <router-link to="/bookcase">书架</router-link>

    <router-view></router-view>

  </div>
</template>

<script>
export default {
  name: 'App',
  components: {

  }
}
</script>

<style>
#app{
  text-align: center;
}
</style>

效果如下：

点击按钮可以调到对于的vue组件。

路由重定向
路由重定向指的是：用户在访问地址 A 的时候，强制用户跳转到地址 C ，从而展示特定的组件页面。通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向： path:'/', redirect:HoMe

路由的嵌套
通过路由实现组件的嵌套展示，叫做嵌套路由。
首先修改BookCase.vue代码：

<template>
  <h1>书架</h1>
  <router-link to="/bookcase/bookone">book1</router-link>&nbsp;&nbsp;
  <router-link to="/bookcase/booktwo">book2</router-link>
  <br>
  <router-view></router-view>
</template>

<script>
export default {
  name: "BookCase"
}
</script>

<style scoped>

</style>

在 index.js 路由模块中，导入需要的组件，并使用 children 属性声明子路由规则。

import {createRouter,createWebHistory} from 'vue-router';
import HoMe from "@/view/HoMe";
import BookCase from "@/view/BookCase";
import BookOne from "@/view/BookOne";
import BookTwo from "@/view/BookTwo";

const routes = [{
    path:'/',
    redirect:HoMe
},{
    path:'/home',
    component:HoMe
},{
    path:'/bookcase',
    component:BookCase,
    children:[{
        path: '/bookcase/bookone',
        component: BookOne
    },{
        path:'/bookcase/booktwo',
        component:BookTwo
    },
    ]
},
]

const router = createRouter({
    history:createWebHistory(),
    routes,
})

export default router;

效果如下：

同时介绍一下编程式导航，通过调用 API 实现导航的方式，叫做编程式导航。
主要介绍一下两个api：this.$router.push('hash 地址')：跳转到指定 Hash 地址，从而展示对应的组件this.$router.go(数值 n)或者this.$router.back()实现导航历史的前进、后退

改一下HoMe.vue

<template>
  <div>
  <h1>Home</h1>
    <button @click="toone('bookone')">前往book1</button>
  </div>
</template>

<script>
export default {
  methods:{
    toone(id){
      this.$router.push('/bookcase/'+id)
    }
  }

}
</script>

<style scoped>

</style>

效果如下：

点击按钮“前往book1”：

使用this.$router.go(数值 n)
修改一下BookOne.vue：

<template>
  <h1>西游记</h1>
  <button @click="back">返回</button>
</template>

<script>
export default {
  name: "BookOne",
  methods:{
    back(){
      //this.$router.back()
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped>

</style>

介绍一下go，back区别：

go(-1): 原页面表单中的内容会丢失；
this.$router.go(-1)：后退+刷新；
this.$router.go(0)：刷新；
this.$router.go(1) ：前进

back(): 原页表表单中的内容会保留；
this.$router.back():后退 ；
this.$router.back(0) 刷新；
this.$router.back(1)：前进

通过 name 属性为路由规则定义名称的方式，叫做命名路由。命名路由是区别于基本路由的一种存在，方便于大型项目中路由的统一管理，现在，在前面基本路由的项目基础上实现实现命名路由。

现在进行一下修改：
index.js

import {createRouter,createWebHistory} from 'vue-router';
import HoMe from "@/view/HoMe";
import BookCase from "@/view/BookCase";
import BookOne from "@/view/BookOne";
import BookTwo from "@/view/BookTwo";

const routes = [{
    path:'/',
    redirect:HoMe
},{
    path:'/home',
    component:HoMe
},{
    path:'/bookcase',
    name: 'case',
    component:BookCase,
    children:[{
        path: '/bookcase/bookone',
        name:'one',
        component: BookOne
    },{
        path:'/bookcase/booktwo',
        name:'two',
        component:BookTwo
    },
    ]
},
]

const router = createRouter({
    history:createWebHistory(),
    routes,
})

export default router;

app.vue，为 router-link标签动态绑定 to 属性的值，并通过 name 属性指定要跳转到的路由规则。期间还可以用
params 属性指定跳转期间要携带的路由参数。：

<template>
  <div id="app">
    <h1 style="color: #42b983">Router</h1>
    <router-link to="/home">首页</router-link>&nbsp;&nbsp;
<!--    <router-link to="/bookcase">书架</router-link>-->
    <router-link :to="{name:'case'}">书架</router-link>


    <router-view></router-view>

  </div>
</template>

<script>
export default {
  name: 'App',
  components: {

  }
}
</script>

<style>
#app{
  text-align: center;
}
</style>

HoMe.vue：

<template>
  <div>
  <h1>Home</h1>
    <button @click="toone('one')">前往book1</button>
  </div>
</template>

<script>
export default {
  methods:{
    toone(id){
      this.$router.push({name:id})
    }
  }

}
</script>

<style scoped>

</style>

导航守卫
全局导航守卫会拦截每个路由规则，从而对每个路由进行访问权限的控制。
可以使用 router.beforeEach 注册一个全局前置守卫：

router.beforeEach((to,from,next)=>{
    console.log(to.path)
    console.log(from.path)
    next()
})
})

to: 即将要进入的目标 用一种标准化的方式
from: 当前导航正要离开的路由 用一种标准化的方式
next：为一个函数

在守卫方法中如果不声明 next 形参，则默认允许用户访问每一个路由！ 在守卫方法中如果声明了 next 形参，则必须调用 next() 函数，否则不允许用户访问任何一个路由！

具体看https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%8F%AF%E7%94%A8%E7%9A%84%E9%85%8D%E7%BD%AE-api