Vue3---router(安装、路由跳转、路由守卫、本地存储)
目录
基础使用
安装
bash
npm install vue-router@4
创建路由
src/router/index.js
,没有则新建
js
import {createRouter, createWebHistory, createWebHashHistory} from "vue-router";
// 引入自定义的组件
import HelloWorld from "../components/HelloWorld.vue";
import Aboutview from "../views/AboutView.vue";
const routes = [
{path: '/', name: 'home', component: HelloWorld},
{path: '/about', name: 'about', component: Aboutview},
]
const router = createRouter({
routes,
history:createWebHistory()
})
export default router
- createWebHistory:History模式创建路由
- createWebHashHistory:Hash模式创建路由
js
// main.js
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from "./router/index.js";
createApp(App).use(router).mount('#app')
createApp(App).use(router).mount('#app')
是链式调用写法
路由跳转
无参跳转
js写法
js
<template>
<div class="card">
<router-link to="/about">
<button>点我跳转到About组件</button>
</router-link>
</div>
</template>
html写法
js
<script setup>
import {useRouter} from "vue-router";
const router = useRouter()
function toAbout() {
router.push('/about')
}
</script>
<template>
<div class="card">
<button @click="toAbout">
点我跳转到About组件
</button>
</div>
</template>
有参跳转
query
- 有参跳转的to需要在前面加上
:
,这样才能被vue识别为对象
js
<script setup>
import {useRouter} from "vue-router";
const router = useRouter()
function toAbout() {
router.push({
name:'about',
query:{id:1}
})
}
</script>
<template>
<div class="card">
// js写法
<button @click="toAbout">
点我跳转到About组件
</button>
// html写法
<router-link :to="{name:'about',query:{id:1}}">
<button>我也能跳转About组件</button>
</router-link>
</div>
</template>
其他路由取出参数
- 注意这里导入的是useRoute不是useRouter
js
// about.vue
<script setup>
import {useRoute} from "vue-router";
const router = useRoute()
const id = router.query.id
</script>
<template>
<h1>{{ id }}</h1>
</template>
params
js
// src/router/index.js
import {createRouter, createWebHistory} from "vue-router";
import Aboutview from "../views/AboutView.vue";
const routes = [
// 在参数前面加上':'
{path: '/about/:id', name: 'about', component: Aboutview},
]
const router = createRouter({
routes,
history:createWebHistory()
})
export default router
js
<script setup>
import {useRouter} from "vue-router";
const router = useRouter()
function toAbout() {
router.push({
name:'about',
params:{id:1}
})
}
</script>
<template>
<div class="card">
// js写法
<button @click="toAbout">
点我跳转到About组件
</button>
// html写法
<router-link :to="{name:'about',params:{id:1}}">
<button>我也能跳转About组件</button>
</router-link>
</div>
</template>
两者在浏览器url中的区别:
- query :
http://localhost:5173/about?id=1
- params :
http://localhost:5173/about/1
路由守卫
简单示例:
js
// src/router/index.js
import {createRouter, createWebHistory} from "vue-router";
const routes = [...]
const router = createRouter({...})
// 上面是注册路由的代码
router.beforeEach((to, from) => {
// 当访问路由时没有携带token会直接alert 全局生效
if (!localStorage.getItem('token')){
alert('没有携带token')
}
})
export default router
- 此时访问任意路由都会弹出警告
- 携带token后便能正常访问
额外:本地存储
sessionStorage
js
// 添加
sessionStorage.setItem('name', '张三')
// 获取
sessionStorage.getItem('name')
// 删除
sessionStorage.removeItem('name')
// 清除全部
sessionStorage.clear()
localStorage
js
// 添加
localStorage.setItem('name', '张三')
// 获取
localStorage.getItem('name')
// 删除
localStorage.removeItem('name')
// 清除全部
localStorage.clear()
cookie
使用cookie需要安装:
bash
npm install vue-cookies
基础用法
注册:
js
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import VueCookies from 'vue-cookies';
createApp(App).use(VueCookies).mount('#app')
增删查:
js
<script setup>
import {inject} from "vue";
const $cookies = inject('$cookies')
// 添加
$cookies.set("name", '陈五','1h')
// 查询
$cookies.get("name", '陈五','1h')
// 删除
$cookies.remove("name", '陈五','1h')
inject
用于在子组件中从父组件或根组件中注入已经创建的实例,如果不想使用也可以直接引入 VueCookies
实例
js
<script setup>
import VueCookies from "vue-cookies";
const $cookies = VueCookies
// 添加
$cookies.set("name", '陈五','1h')
</script>
示例
在main.js
引入VueCookies
并use
js
// main.js
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from "./router/index.js";
import VueCookies from 'vue-cookies';
createApp(App).use(VueCookies).use(router).mount('#app')
存入cookie并跳转到about
组件
js
<script setup>
import {useRouter} from "vue-router";
import {inject} from "vue";
import VueCookies from "vue-cookies";
const router = useRouter()
const $cookies = inject('$cookies');
function setToken() {
// 添加
$cookies.set("name", '陈五','1h')
router.push('about')
}
</script>
<template>
<div class="card">
<button @click="setToken">
点我跳转到About组件
</button>
</div>
</template>
取出cookie并渲染到模版
js
<script setup>
import VueCookies from 'vue-cookies'
import {inject} from "vue";
const $cookies = inject('$cookies');
const name = $cookies.get('name')
</script>
<template>
<h1>{{ name }}</h1>
</template>
card">
<button @click="setToken">
点我跳转到About组件
</button>
</div>
</template>
取出cookie并渲染到模版
js
<script setup>
import VueCookies from 'vue-cookies'
import {inject} from "vue";
const $cookies = inject('$cookies');
const name = $cookies.get('name')
</script>
<template>
<h1>{{ name }}</h1>
</template>