Vue2中的路由
一、router在项目中使用
1.下载vue-router
npm install vue-router --save
2.在src目录下创建router文件并在router下index.js文件
//router文件夹 index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
}
]
const router = new VueRouter({
routes
})
export default router
3.在man.js中通过 router 配置参数注入路由
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
3.在App.vue根组件中
<template>
<router-view></router-view>
</template>
完成以上步骤就可以通过在 router/index.js 中配置的路由访问页面了
router-view
路由出口
路由匹配到的组件将渲染在 <router-view></router-view>
处
使用 router-link 组件来导航
- 对应的路由匹配成功,将自动设置 class 属性值
.router-link-active
- 通过传入
to
属性指定链接 - 默认会被渲染成一个
<a>
标签 - 其它属性请参照官网 https://v3.router.vuejs.org/zh/api/#to
<p>
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
this.$route
当前激活的路由信息对象。这个属性是只读的,里面的属性是 immutable (不可变) 的,不过你可以 watch (监测变化) 它。
//路由部分代码
const router = new VueRouter({
routes: [
// 动态路径参数 以冒号开头
{
path: '/user/:id', component: User }
// /user/1 user/2 等路径都会被识别
]
})
一个“路径参数”使用冒号 : 标记。当匹配到一个路由时,参数值会被设置到 this.$route.params
/user/:id 路径中的id的值可通过this.$route.params.id
获取
$route常用属性
$route.path
类型: string
字符串,对应当前路由的路径,总是解析为绝对路径,如 “/foo/bar”。
$route.params
类型: Object
一个 key/value 对象,包含了动态片段和全匹配片段,如果没有路由参数,就是一个空对象。
$route.query
类型: Object
一个 key/value 对象,表示 URL 查询参数。例如,对于路径 /foo?user=1,则有 $route.query.user == 1,如果没有查询参数,则是个空对象。
$route.hash
类型: string
当前路由的 hash 值 (带 #) ,如果没有 hash 值,则为空字符串。
$route.name
当前路由的名称,如果有的话。(查看命名路由)
$route.redirectedFrom
如果存在重定向,即为重定向来源的路由的名字。(参阅重定向和别名)
this.$router
router 实例。
我们使用 this.$router 的原因是我们并不想在每个独立需要封装路由的组件中都导入路由。
编程式的导航
router.push
router.push(location, onComplete?, onAbort?)
router.push(...)与<router-link :to="...">实现效果一致
// 字符串
router.push('home')
// 对象
router.push({
path: 'home' })
// 命名的路由
router.push({
name: 'user', params: {
userId: '123' }})
// 带查询参数,变成 /register?plan=private
router.push({
path: 'register', query: {
plan: 'private' }})
带有path属性,param属性就不会生效
const userId = '123'
router.push({
name: 'user', params: {
userId }}) // -> /user/123
router.push({
path: `/user/${
userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({
path: '/user', params: {
userId }}) // -> /user
router.replace
跟 router.push 很像,唯一的不同就是,它不会向 history 添加新记录,而是跟它的方法名一样 —— 替换掉当前的 history 记录。
router.replace(location, onComplete?, onAbort?)
//<router-link :to="..." replace>和router.replace(...)
router.replace
// 在浏览器记录中前进一步,等同于 history.forward()
router.go(1)
// 后退一步记录,等同于 history.back()
router.go(-1)
// 前进 3 步记录
router.go(3)
// 如果 history 记录不够用,那就默默地失败呗
router.go(-100)
router.go(100)
Vue中的路由守卫
https://blog.csdn.net/qq_38367703/article/details/126842275?spm=1001.2014.3001.5501
Vue3中的路由
import {
createRouter, createWebHashHistory } from 'vue-router'
const routes = []
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
Vue3更强调模块化 注重按需引入,所有使用vue-router就需要先导入,然后创建router实例
import {
useRouter } from "vue-router"
const router = useRouter()
router.push('/home')