Vue3---router(安装、路由跳转、路由守卫、本地存储)

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中的区别:

  • queryhttp://localhost:5173/about?id=1
  • paramshttp://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需要安装:

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>
相关推荐
Asort13 分钟前
JavaScript 从零开始(六):控制流语句详解——让代码拥有决策与重复能力
前端·javascript
EMT33 分钟前
在 Vue 项目中使用 URL Query 保存和恢复搜索条件
javascript·vue.js
艾小码35 分钟前
还在被超长列表卡到崩溃?3招搞定虚拟滚动,性能直接起飞!
前端·javascript·react.js
前端康师傅40 分钟前
JavaScript 作用域常见问题及解决方案
前端·javascript
我是日安42 分钟前
从零到一打造 Vue3 响应式系统 Day 9 - Effect:调度器实现与应用
前端·vue.js
Mintopia1 小时前
🚀 Next.js 全栈 E2E 测试:Playwright vs Cypress
前端·javascript·next.js
原生高钙1 小时前
JS设计模式指南
前端·javascript
Mintopia1 小时前
⚡ WebAssembly 如何加速 AIGC 模型在浏览器中的运行效率?
前端·javascript·aigc
断竿散人1 小时前
乾坤微前端框架的沙箱技术实现原理深度解析
前端·javascript·前端框架
uhakadotcom1 小时前
在python中,使用conda,使用poetry,使用uv,使用pip,四种从效果和好处的角度看,有哪些区别?
前端·javascript·面试