【12.0】Vue之Router的使用
【一】Router的介绍
-
Router是一种用于实现页面组件跳转的工具。
- 在单页面应用中,为了实现页面之间的切换,可以使用Router来进行管理和控制。
-
提倡单页面应用,需要做页面的跳转----》借助于Router实现页面组件的跳转
【二】Router之简单使用
【1】页面跳转
- 首先需要编写页面组件;
- 在路由配置文件(如router/index.js)的routes数组中添加一个路由。
【2】组件中实现页面跳转
方式一:使用 router-link 标签
- 可以通过使用router-link标签来实现页面跳转
- 其中to属性可以是一个地址字符串,也可以是一个对象。
- to:可以是地址,也可以是对象(标签指令:to)
<router-link :to="tag_url">
<router-link to="/about"></router-link>
方式二:js控制
- 在组件的javascript代码中使用
this.$router.push()
来控制路由跳转this.$router.push('/about')
【3】路由跳转时,可以使用对象
(1)通过对象跳转路由name形式
-
可以通过传递对象参数的方式来指定跳转到已经在路由中注册过的name
-
<router-link :to="{name:'about'}">
(2)通过对象跳转路由path形式
-
除了使用name,在to属性中也可以直接指定跳转到的路径
-
<router-link :to="{path:'/about'}">
(3)对象中可以有query属性
- 跳转时,对象中还可以传递query属性,该属性是一个对象类型,会将其中的key-value对拼接到跳转路径后面
console.log(this.$route.query)
<router-link to="/about?name=dream&age=19">
(4)在另一个页面中取出地址栏中数据
console.log(this.$route.query);
(6)使用带参数的路径
-
在路由配置中,可以定义带参数的路径,通过在路由配置的path中使用
:
来定义参数名称。{ path: '/detail/:pk', name: 'detail', component: DetailView },
-
在路由访问时,可以通过
this.$route.params.pk
来获取路径中的参数。this.$route.params.pk
(7)路由跳转时使用带参数的路径
-
在进行路由跳转时,也可以使用上述带参数的路径形式
-
this.$router.push({name: 'detail', params: {pk: 999}})
-
<router-link :to="{name:'detail',params:{pk:88}}">
(补充)注意区分$route
和$router
this.$route
是Vue.js中的一个内置对象,代表当前路由的相关信息。- 它包含了当前页面的路径、参数、查询字符串等信息。
- 通过
this.$route
可以获取当前路由对象的各种属性 - 例如
path
表示当前路径,params
表示传递的参数,query
表示查询字符串等。
this.$router
是Vue.js中用来进行路由导航的对象。- 它是通过
new VueRouter()
创建的实例,代表整个路由对象。 - 通过
this.$router
可以进行页面跳转、切换路由等操作。 - 它提供了一些方法如
push()
、replace()
、go()
等,这些方法可以用于在代码中进行页面跳转或路由切换。
- 它是通过
this.$route
是当前路由对象,用于获取当前页面的路由信息,this.$router
是整个路由对象,用于进行页面跳转和路由管理。
(补充)关于this.$router的一些方法
this.$router.push(path)
- 相当于点击路由链接,可以返回到当前路由界面;
this.$router.replace(path)
- 用新路由替换当前路由,不可以返回到当前路由界面;
this.$router.back()
- 请求(返回)上一个记录的路由;
this.$router.go(-1)
- 请求(返回)上一个记录的路由;
this.$router.go(1)
- 请求下一个记录的路由
【三】Router之多级路由
【1】新建一个页面组件(DreamView),配置路由
{
path: '/dream',
name: 'dream',
component: DreamView,
},
【2】在页面中,想再显示页面组件,实现点击切换的效果
<h1>dream页面</h1>
<router-link to="dream01">
<button>dream-01</button>
</router-link>
<router-link to="dream02">
<button>dream-02</button>
</router-link>
<router-view>
# 以后这里变换页面组件,多级路由
</router-view>
【3】新建两个页面组件,Dream01.vue,Dream02.vue,配置路由children
{
path: '/dream',
name: 'dream',
component: DreamView,
children: [ //通过children配置子级路由
{
path: 'dream01', //此处一定不要写:/news
component: Dream01
},
{
path: 'dream02',//此处一定不要写:/message
component: Dream02
}
]
},
【案例】
-
多级路由是指在一个父级路由下有多个子级路由的情况。
- 这样可以让我们更好地组织和管理应用程序的路由。
-
下面是一个例子来详解Vue中的多级路由:
- 假设我们有一个电子商务网站,主页面包括商品展示和购物车两个模块。
- 其中,商品展示页面下有多个分类,每个分类又有多个商品。我们希望在URL中通过路由参数动态切换不同分类和商品。
- 假设我们有一个电子商务网站,主页面包括商品展示和购物车两个模块。
(1)首先,在Vue实例中创建一个Vue Router实例,并定义路由规则:
import Vue from 'vue'
import VueRouter from 'vue-router'
// 引入组件
import Home from '../views/Home.vue'
import Category from '../views/Category.vue'
import Product from '../views/Product.vue'
Vue.use(VueRouter)
// 定义路由规则
const routes = [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/category/:categoryId',
name: 'category',
component: Category,
children: [
{
path: 'product/:productId',
name: 'product',
component: Product
}
]
}
]
// 创建路由实例
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
(2)接下来,我们需要在父组件中设置路由出口,以及导航到子级路由:
<!-- Home.vue -->
<template>
<div>
<h1>Home</h1>
<router-link to="/category/electronics">Electronics</router-link>
<router-link to="/category/books">Books</router-link>
</div>
</template>
<!-- Category.vue -->
<template>
<div>
<h2>{{ $route.params.categoryId }}</h2>
<router-view></router-view>
</div>
</template>
<!-- Product.vue -->
<template>
<div>
<h3>{{ $route.params.productId }}</h3>
<!-- 商品相关内容 -->
</div>
</template>
- 在上述代码中,父组件
Home.vue
中通过<router-link>
标签定义了两个路由链接到不同的分类页面。- 而子组件
Category.vue
使用了动态路由参数$route.params
来获取并显示当前的分类ID,并通过<router-view>
标签渲染子级路由Product.vue
。
- 而子组件
(3)最后,我们需要在根组件上添加<router-view>
标签将路由组件进行渲染:
<!-- App.vue -->
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
- 这样,当我们点击分类链接时,Vue Router会根据URL的路径匹配路由规则,并将对应的组件渲染到
<router-view>
标签中。- URL的路径可以包含动态参数,这样我们就可以根据参数的变化加载不同的子级路由组件。
【四】Router之路由守卫
【介绍】
- 在Vue Router中,路由守卫是一种机制,用于在导航发生前、发生时和发生后执行一些操作。
- 通过使用路由守卫,我们可以控制路由的访问权限、实现登录验证、处理异步请求等操作。
- Vue Router提供了三种类型的路由守卫:
- 全局守卫、路由独享守卫和组件内守卫。
【案例】
- 假设我们有一个需要进行登录验证的应用程序,只有在用户已登录的情况下才能访问某些页面。
- 我们希望在用户访问受保护的页面之前进行登录验证,并在登录成功后才允许访问。
(1)首先,在Vue Router实例中定义路由规则,并添加路由守卫:
import Vue from 'vue'
import VueRouter from 'vue-router'
// 引入组件
import Home from '../views/Home.vue'
import Dashboard from '../views/Dashboard.vue'
import Login from '../views/Login.vue'
Vue.use(VueRouter)
// 定义路由规则
const routes = [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/dashboard',
name: 'dashboard',
component: Dashboard,
meta: { requiresAuth: true } // 定义需要登录验证的页面
},
{
path: '/login',
name: 'login',
component: Login
}
]
// 创建路由实例
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
// 全局前置守卫
router.beforeEach((to, from, next) => {
// 判断是否需要登录验证
if (to.meta.requiresAuth) {
// 判断用户是否已登录,这里假设通过判断localStorage中的登录状态来确定
const isAuthenticated = localStorage.getItem('isAuthenticated')
if (!isAuthenticated) {
// 如果未登录,则跳转到登录页面
next('/login')
} else {
// 已登录,允许访问
next()
}
} else {
next()
}
})
export default router
- 上述代码中,我们在路由规则中的
"/dashboard"
路径下定义了一个元字段meta: { requiresAuth: true }
来标识该页面需要登录验证。- 然后,在全局前置守卫
beforeEach
中对每个路由进行拦截和验证。
- 然后,在全局前置守卫
- 在全局前置守卫中,我们首先判断将要访问的路由是否需要登录验证。
- 如果需要验证,则判断用户是否已登录,这里假设通过判断localStorage中的登录状态来确定。
- 如果用户未登录,则跳转到登录页面;如果用户已登录,则允许访问。
(2)接下来,在登录成功后,我们可以将登录状态存储到localStorage中,并使用router.push()
方法跳转到受保护的页面:
// Login.vue
methods: {
login() {
// 登录验证逻辑
// ...
// 登录成功,将登录状态存储到localStorage中
localStorage.setItem('isAuthenticated', true)
// 跳转到受保护的页面
this.$router.push('/dashboard')
}
}
- 这样,当用户访问受保护的页面时,Vue Router会先执行全局前置守卫,进行登录验证。
- 只有在登录成功后才允许访问。
【五】Router之路由的两种工作模式
路由器的两种工作模式
对于一个url来说,什么是hash值?—— #及其后面的内容就是hash值。
hash值不会包含在 HTTP 请求中,即:hash值不会带给服务器
hash模式
- 地址中永远带着#号,不美观
- 若以后将地址通过第三方手机app分享,若app校验严格,则地址会被标记为不合法。
- 兼容性较好。
history模式
- 地址干净,美观
- 兼容性和hash模式相比略差
- 应用部署上线时需要后端人员支持,解决刷新页面服务端404的问题
- Vue中的路由器有两种工作模式:
- hash模式和history模式。
【1】Hash模式:
- 对于一个URL来说,hash值是指URL中#号及其后面的内容。
- 例如,URL为
http://example.com/#/home
- 那么
#/home
就是hash值。
- 例如,URL为
- Hash模式的特点是
- URL中永远带着
#
号,不会包含在HTTP请求中发送给服务器。
- URL中永远带着
- 优点:
- 兼容性较好,支持在不同浏览器和平台上正常运行。
- 缺点:
- URL不够美观
- 如果通过第三方手机APP分享地址,有些严格的APP可能会将带有
#
号的URL标记为不合法。
【2】History模式:
- History模式通过利用HTML5的history API
- 在不刷新页面的情况下改变URL,使得URL更加干净、美观。
- History模式的特点是
- URL中不再带有
#
号,可以直接访问类似于传统URL的路径。
- URL中不再带有
- 优点:
- 地址干净、美观,与传统URL一样,更符合用户的习惯。
- 缺点:
- 相对于Hash模式,兼容性较差。
- 特别是在部署上线时,需要服务器的支持来解决刷新页面后可能出现的服务端404错误问题。
【3】示例演示Vue Router中的两种工作模式的切换
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
]
const router = new VueRouter({
// 使用hash模式
// mode: 'hash',
// 使用history模式
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
- 在上述代码中
- 我们可以根据需要注释掉其中一种模式,分别测试hash模式和history模式。
- 如果使用hash模式
- 可以将
mode
的值设为'hash'
- 例如:
mode: 'hash'
。
- 可以将
- 如果使用history模式
- 可以将
mode
的值设为'history'
- 例如:
mode: 'history'
。
- 可以将
- 在实际开发中,只需根据具体需求选择一种模式即可
- 如果要使用history模式,还需要确保在部署应用程序时服务器进行相应的配置。
【补充】localstorage和sessionstorage,和cookie
- 前端存储数据
- 登录成功,有token,存本地
- 京东...
- 不登陆加购物车
- 迪卡侬官网
- 登录成功,有token,存本地
- 前端可以存数据的位置
- localstorage:永久存储,除非你删除,关闭浏览器,再打开还会在
- sessionstorage:只在当前会话生效,关闭浏览器,就没了
- cookie:有过期时间,到了过期时间,自动删除
<template>
<div class="home">
<h1>操作localstorage,永久存储</h1>
<button @click="addLocalstorage">增加</button>
<button @click="getLocalstorage">查</button>
<button @click="deleteLocalstorage">删除</button>
<h1>操作sessiostorage,当前会话,关闭浏览器</h1>
<button @click="addSessiostorage">增加</button>
<button @click="getSessiostorage">查</button>
<button @click="deleteSessiostorage">删除</button>
<h1>操作cookie,有过期时间</h1>
<button @click="addCookie">增加</button>
<button @click="getCookie">查</button>
<button @click="deleteCookie">删除</button>
</div>
</template>
<script>
export default {
name: 'HomeView',
methods: {
addLocalstorage() {
var userinfo = {name: 'dream', age: 19}
localStorage.setItem('userinfo', JSON.stringify(userinfo))
},
getLocalstorage() {
var userinfo = localStorage.getItem('userinfo')
console.log(JSON.parse(userinfo).name)
},
deleteLocalstorage() {
localStorage.clear()
localStorage.removeItem('userinfo')
},
addSessiostorage() {
var userinfo = {name: '彭于晏', age: 19}
sessionStorage.setItem('userinfo', JSON.stringify(userinfo))
},
getSessiostorage() {
var userinfo = sessionStorage.getItem('userinfo')
console.log(JSON.parse(userinfo).name)
},
deleteSessiostorage() {
sessionStorage.clear()
sessionStorage.removeItem('userinfo')
},
addCookie() {
// 需要借助于第三方 vue-cookies
// cnpm install -S vue-cookies
this.$cookies.set('name', '刘亦菲', '300s')
},
getCookie() {
console.log(this.$cookies.get('name'))
},
deleteCookie() {
this.$cookies.remove('name')
},
}
}
</script>
【1】localStorage:
- localStorage用于在浏览器中永久保存数据,除非手动删除或清除浏览器缓存。
- 即使关闭浏览器再次打开,数据仍然可以被访问到。
- 在登录成功后
- 如果有token需要持久保存,可以将token存储在localStorage中。
- localStorage提供了setItem(key, value)和getItem(key)等方法来设置和获取数据。
- 示例代码如下:
// 存储token到localStorage
localStorage.setItem('token', 'your_token_here');
// 从localStorage中获取token
const token = localStorage.getItem('token');
【2】sessionStorage:
- sessionStorage用于在当前会话中临时保存数据,一旦会话结束(浏览器窗口关闭),数据就会被清除。
- 当用户未登录但需要加入购物车时,可以使用sessionStorage来存储相关数据。
- sessionStorage的使用方式与localStorage类似,示例代码如下:
// 存储购物车商品ID到sessionStorage
sessionStorage.setItem('cartItemId', 'your_item_id_here');
// 从sessionStorage中获取购物车商品ID
const cartItemId = sessionStorage.getItem('cartItemId');
【3】cookie:
- cookie是存储在用户浏览器上的小型文本文件,它具有过期时间。
- 当过期时间到达时,cookie会被自动删除。
- 可以使用cookie来实现一些需要在多个页面之间共享的数据。
- 通过document.cookie属性可以设置和获取cookie值。
- 示例代码如下:
// 存储一个带过期时间的cookie
document.cookie = 'token=your_token_here; expires=Thu, 1 Jan 2024 12:00:00 UTC; path=/';
// 获取cookie
const cookieValue = document.cookie;
【4】小结
- 需要注意的是,安全性方面,为了避免敏感信息泄露,不建议将用户的敏感数据直接存储在localStorage、sessionStorage或cookie中。
- 在实际开发中,对于敏感信息,最好使用安全的传输方式(例如HTTPS)进行传输,并在服务器端进行相应的验证和存储。
- 另外
- 对于cookie,还需要注意设置合适的域名和路径,以确保cookie的正确读取和写入。
- 同时,需要注意防止跨站脚本攻击(XSS)和跨站请求伪造攻击(CSRF),对cookie进行适当的安全处理。
本文来自博客园,作者:Chimengmeng,转载请注明原文链接:https://www.cnblogs.com/dream-ze/p/17610527.html