在Vue3中添加router

1. 安装

npm install vue-router@4

2. 创建router目录并在该目录下创建index.js文件
   
3. 编辑index.js文件

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

const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        {
            path: "/",
            name: "首页",
            component: () => import('../view/Index.vue')
        },
        {
            path: "/login",
            name: "登录页面",
            component: () => import('../view/Login.vue')
        }
    ]
})

// 前置守卫
router.beforeEach((to, from,next) => {
    return next()
})
router.afterEach((to,from)=>{

})
export default router

4. 在main.js文件中挂在router

import { createApp } from 'vue'

import router from './router/index.js'
import App from './App.vue'


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

路由匹配&获取数据

一般我们在有些情况下，我们url最后一个字符是数字，通过不同的数字来区分不同的页面
比如：/user/1 /user/2 /user/x 等等

1. 创建一个测试页面并向路由配置文件中添加路由记录

const router = createRouter({
   history: createWebHashHistory(),
   routes: [
       {
           path: "/",
           name: "首页",
           component: () => import('../view/Index.vue')
       },
       {
           path: "/login",
           name: "登录页面",
           component: () => import('../view/Login.vue')
       },
       {
           path:"/test/:id",
           name: "路由匹配测试",
           component: () => import('../view/Test.vue')
       }
   ]
})

注意：path:“/test/:id”, 关键在于 :id
2. 在跳转的页面获取这个id 数据

<script setup>
import {ref} from "vue"
import {useRoute} from "vue-router"
const id = ref()

const route = useRoute()
console.log(route.params.id)
id.value = route.params.id
</script>

通过 route.params来获取数据
3. /ters/1?name=陈威龙 如果获取陈威龙
通过 route.query 来获取

<script setup>
import {ref} from "vue"
import {useRoute} from "vue-router"
const id = ref()

const route = useRoute()
console.log(route.params.id) 
id.value = route.params.id

console.log(route.query.name)// 输出  陈威龙

</script> 

route 和 router 区别

区别：router是通过“Vue.use(VueRouter)”和VueRouter构造函数得到一个实例对象，它是一个全局的对象。而route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象。

1. router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的对象和属性。
   比如：

router.push({path:'home'});
router.replace({path:'home'});

2. route：这就是经常用到的
   比如：path params query 这几个对象就是我们常用到的，从而去获取当前页面路由的信息。

路由跳转

1. 申明式导航
   在标签元素外包括 导航标签，从而在点击后会调整到指定的路由页面

<router-link :to="...">

2. 编程式导航，也是推荐使用的,这里跳转可以看到，使用的是router,不要傻傻的搞错对象了

// 字符串路径
router.push('/users/eduardo')

// 带有路径的对象
router.push({ path: '/users/eduardo' })

// 命名的路由，并加上参数，让路由建立 url
router.push({ name: 'user', params: { username: 'eduardo' } })

// 带查询参数，结果是 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })

// 带 hash，结果是 /about#team
router.push({ path: '/about', hash: '#team' })