广州网站 制作信科便宜,淘宝seo搜索优化,网页设计怎么做,湖南做网站kaodezhu系列文章目录
第七章 VueRouter路由 文章目录 系列文章目录第一节#xff1a;VueRouter基础一、安装#xff1a;二、基本使用#xff1a;1. 创建路由代码#xff1a;Single Page Application#xff1a;SPA2. 使用路由3. 展示路由#xff1a; 二、嵌套路由三、路由传参1…系列文章目录
第七章 VueRouter路由 文章目录 系列文章目录第一节VueRouter基础一、安装二、基本使用1. 创建路由代码Single Page ApplicationSPA2. 使用路由3. 展示路由 二、嵌套路由三、路由传参1. 路由指定参数2. 查询字符串传参 四、编程式导航1. router.push跳转2. router.replace替换 第二节VueRouter进阶一、导航守卫1. 全局守卫2. 组件内导航守卫3. 路由导航守卫 二、路由元信息 第一节VueRouter基础
在网页中经常需要发生页面更新或者跳转。这时候我们就可以使用Vue-Router来帮我们实现。Vue-Router是用来做路由的也就是定义url规则与具体的View映射的关系。可以在一个单页面中实现数据的更新。
一、安装
通过命令npm install vue-router4.3.0 --save 或者在创建项目的时候选择添加Vue-Router的支持。
二、基本使用
1. 创建路由代码Single Page ApplicationSPA
在src/router/index.js中填入以下代码
import { createRouter, createWebHistory } from vue-router
import HomeView from ../views/HomeView.vueconst router createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: /,name: home,component: HomeView},{path: /about,name: about,component: () import(../views/AboutView.vue)}]
})export default router以上代码解释如下
使用createRouter创建路由对象。路由工作模式有两种工作模式
history模式路由中不包含#更加美观但是在后期部署后如果前端项目代码和后端项目代码部署在同一个域名下则容易产生路由混淆前端路由和后端路由混淆在一起了。以上代码用的是history模式代码为
const router createRouter({history:createWebHistory(), //history模式
})hash模式路由中包含#不太美观对SEO优化不够友好。好处是兼容性更好即使前端代码和后端代码部署在同一个域名下也不会产生路由混淆。使用hash模式的代码为
const router createRouter({history:createWebHashHistory(), //hash模式
})routes是一个数组里面是对象数据每个对象中的属性作用分别如下
path该路由对应的path。component组件对象既可以先导入也可以指定组件的时候使用import语句来导入。name路由名称后期在做路由反转的时候可以使用。
2. 使用路由
然后在main.js文件中对router进行使用
import { createApp } from vue
import App from ./App.vue
import router from ./routerconst app createApp(App)app.use(router)app.mount(#app)以上相关代码解释如下 从src/router/index.js中导入router对象。 执行app.use(router)代码即可使用此路由了。
3. 展示路由
在App.vue中的代码如下
script setup
import { RouterLink, RouterView } from vue-router
/scripttemplateheaderdiv classwrappernavRouterLink to/Home/RouterLinkRouterLink to/aboutAbout/RouterLink/nav/div/headerRouterView /
/template以上相关代码解释如下 在模板中使用RouterLink定义路由链接此组件有点类似html中的a标签在点击后会跳转到to属性指定的路由上去。to除了直接写path外还可以通过name来定义比如
RouterLink :to{name: home}Home/RouterLink使用RouterView标识路由出口在进入路由A后路由A所对应的组件会显示在RouterView的地方。
二、嵌套路由
在某个页面中如果还需要通过路由更新局部模块那么可以通过嵌套路由来实现只要配置children就可以了。
src/router/index.js代码如下
const router createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: /,name: home,component: HomeView},{path: /news,component: () import(../views/news/NewsView.vue),name: news,children: [{path: detail, name: news-detail, component: import(../views/news/NewsDetailView.vue)}]},{path: /about,name: about,component: () import(../views/AboutView.vue)}]
})src/views/news/NewsView.vue代码如下
template
ulliRouterLink :to{name: news-detail}新闻1/RouterLink/lili新闻2/lili新闻3/li
/ul
RouterView/RouterView
/templatesrc/views/news/NewsDetailView.vue代码如下
template
h1AIGC将迎来爆发式增长/h1
/template三、路由传参
路由传参有两种方式一种是在定义路由的时候指定参数另一种是通过查询字符串的方式传参。
1. 路由指定参数
src/router/index.js代码如下
const router createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [path: /news,component: () import(../views/news/NewsView.vue),name: news,children: [{path: detail/:pk,name: news-detail,component: import(../views/news/NewsDetailView.vue)}]}]
})在使用这个路由的时候其代码如下
RouterLink :to{name: news-detail, params: {pk: 1}}新闻1/RouterLink以后在NewsDetailView.vue的onMounted生命周期函数中可以通过以下方式获取到参数
script setup nameNewsDetailViewimport { onMounted } from vue;import { useRoute } from vue-router;const route useRoute();onMounted(() {const pk route.params.pk;console.log(pk);})
/script2. 查询字符串传参
使用查询字符串传参不需要预先在路由定义的时候指定参数使用的时候直接传递即可示例代码如下/news/detail?pk1page2
RouterLink :to{name: news, query: {page: 1}}News/RouterLink以后在NewsView.vue组件中的onMounted生命周期函数中通过以下代码即可获取到
四、编程式导航
之前我们学习了使用可以在用户点击的情况下进行页面更新。但有时候我们想要在js中手动的修改页面的跳转这时候就需要使用编程式导航了。
1. router.push跳转
想要导航到不同的URL则使用router.push方法。这个方法会向history栈添加一个新的记录所以当用户点击浏览器后退按钮时则回到之前的URL。 当你点击时这个方法会在内部调用所以说点击等同于调用router.push(…)。 示例代码如下
script setupimport {useRouter} from vue-router;const router useRouter();// 字符串路径router.push(/users/eduardo)// 带有路径的对象router.push({ path: /users/eduardo })// 命名的路由并加上参数让路由建立 urlrouter.push({ name: user, params: { username: eduardo } })// 带查询参数结果是 /register?planprivaterouter.push({ path: /register, query: { plan: private } })// 带 hash结果是 /about#teamrouter.push({ path: /about, hash: #team })
/script注意如果提供了 pathparams 会被忽略上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法你需要提供路由的 name 或手写完整的带有参数的 path
const username eduardo
// 我们可以手动建立 url但我们必须自己处理编码
router.push(/user/${username}) // - /user/eduardo
// 同样
router.push({ path: /user/${username} }) // - /user/eduardo
// 如果可能的话使用 name 和 params 从自动 URL 编码中获益
router.push({ name: user, params: { username } }) // - /user/eduardo
// params 不能与 path 一起使用
router.push({ path: /user, params: { username } }) // - /user2. router.replace替换
它的作用类似于 router.push唯一不同的是它在导航时不会向 history 添加新记录正如它的名字所暗示的那样——它取代了当前的条目。 也可以直接在传递给 router.push 的 to 参数中增加一个属性 replace: true
router.push({ path: /home, replace: true })
// 相当于
router.replace({ path: /home })第二节VueRouter进阶
一、导航守卫
导航守卫分为全局守卫、组件导航守卫以及路由导航守卫。下面分别来进行讲解。
1. 全局守卫
全局守卫有beforeEach 和afterEach 即在跳转前和跳转后的导航守卫。 首先看下beforeEach示例代码如下
router.beforeEach((to, from) {if (// 检查用户是否已登录!isAuthenticated // ❗️ 避免无限重定向to.name ! Login) {// 将用户重定向到登录页面return { name: Login }}
})如果beforeEach的回调函数中返回的是true或者什么都没返回则跳转到默认的路由否则跳转到返回的路由。 afterEach导航路由为已经改变完成后的守卫。示例代码如下
router.afterEach(function(to,from){console.log(to:,to);console.log(from:,from);
})2. 组件内导航守卫
组件内导航守卫只能使用以下两个方法 onBeforeRouteLeave在离开当前路由前调用。如果返回false将会取消路由离开。比如
router.afterEach(function(to,from){console.log(to:,to);console.log(from:,from);
})onBeforeRouteUpdate在路由发生更新时调用比如从/user/1更新到/user/2就会执行该守卫方法。一般这个方法用的比较少。
3. 路由导航守卫
在定义路由的时候可以指定beforeEnter导航守卫示例代码如下
const routes [{path: /users/:id,component: UserDetails,beforeEnter: (to, from) {// reject the navigationreturn false},},
]二、路由元信息
有时你可能希望将任意信息附加到路由上如过渡名称、谁可以访问路由等。这些事情可以通过接收属性对象的meta属性来实现并且它可以在路由地址和导航守卫上都被访问到。定义路由的时候你可以这样配置 meta 字段
const routes [{path: /posts,component: PostsLayout,children: [{path: new,component: PostsNew,// 只有经过身份验证的用户才能创建帖子meta: { requiresAuth: true },},{path: :id,component: PostsDetail// 任何人都可以阅读文章meta: { requiresAuth: false },}]}
]那么以后可以通过路由.meta 访问到元数据。示例代码如下
router.beforeEach((to, from) {// 而不是去检查每条路由记录// to.matched.some(record record.meta.requiresAuth)if (to.meta.requiresAuth !auth.isLoggedIn()) {// 此路由需要授权请检查是否已登录// 如果没有则重定向到登录页面return {path: /login,// 保存我们所在的位置以便以后再来query: { redirect: to.fullPath },}}
})
