在Vue3中添加router
- 安装
npm install vue-router@4
- 创建router目录并在该目录下创建index.js文件
- 编辑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
- 在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 等等
- 创建一个测试页面并向路由配置文件中添加路由记录
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对象,是一个局部的对象。
- router是VueRouter的一个对象,通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象,这个对象中是一个全局的对象,他包含了所有的路由包含了许多关键的对象和属性。
比如:
router.push({path:'home'});
router.replace({path:'home'});
- route:这就是经常用到的
比如:path params query 这几个对象就是我们常用到的,从而去获取当前页面路由的信息。
路由跳转
- 申明式导航
在标签元素外包括 导航标签,从而在点击后会调整到指定的路由页面
<router-link :to="...">
- 编程式导航,也是推荐使用的,这里跳转可以看到,使用的是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' })
评论区