侧边栏壁纸
博主头像
实习两年半

基础不牢,地动山摇。

  • 累计撰写 43 篇文章
  • 累计创建 40 个标签
  • 累计收到 4 条评论

目 录CONTENT

文章目录

Vue3中路由那些事-vue-router

实习两年半
2022-06-13 / 0 评论 / 3 点赞 / 665 阅读 / 811 字
温馨提示:
本文最后更新于 2022-06-13,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

在Vue3中添加router

  1. 安装
npm install vue-router@4
  1. 创建router目录并在该目录下创建index.js文件
    image
  2. 编辑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
  1. 在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'});
  1. route:这就是经常用到的
    比如:path params query 这几个对象就是我们常用到的,从而去获取当前页面路由的信息。

路由跳转

  1. 申明式导航
    在标签元素外包括 导航标签,从而在点击后会调整到指定的路由页面
<router-link :to="...">
  1. 编程式导航,也是推荐使用的,这里跳转可以看到,使用的是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' })
3

评论区