編程式導(dǎo)航 | Vue Router

看官方文檔

vue Router

是 Vue.js 的官方路由。它與 Vue.js 核心深度集成，讓用 Vue.js 構(gòu)建單頁(yè)應(yīng)用變得輕而易舉。功能包括：

• 嵌套路由映射
• 動(dòng)態(tài)路由選擇
• 模塊化、基于組件的路由配置
• 路由參數(shù)、查詢、通配符
• 展示由 Vue.js 的過(guò)渡系統(tǒng)提供的過(guò)渡效果
• 細(xì)致的導(dǎo)航控制
• 自動(dòng)激活 CSS 類的鏈接
• HTML5 history 模式或 hash 模式
• 可定制的滾動(dòng)行為
• URL 的正確編碼

1.安裝路由組件

建立項(xiàng)目時(shí)? npm init vue app?? cnpm install vue-router@4 --save

2.編寫(xiě)路由腳本

在項(xiàng)目的src/router/index.js 或者 index.ts

import {createRouter, createWebHashHistory} from 'vue-router'
import Home from '../views/Home.vue'
const routes = [
{
path: '/about',
component: () => import('../views/About.vue')
}, {
path: '/home',
component: Home,
}, {
path: '/',
redirect: '/home'
}, {
path: '/login',
component: () => import('../views/Login.vue')
}, {
path: '/user',
component: () => import('../views/User.vue'),
redirect: '/user/manager',
children: [
{path: 'add', component: () => import('../views/UserAdd.vue')},
{path: 'show', component: () => import('../views/UserShow.vue')},
{path: 'manager', component: () => import('../views/UserManager.vue')},
]
}
]
const router = createRouter({
history: createWebHashHistory(),
routes,
})
export default router

App.vue

<template>
<h3>項(xiàng)目首頁(yè)</h3>
<hr>
<router-link to="/home">首頁(yè)</router-link> &nbsp;
<router-link to="/login">登錄</router-link> &nbsp;
<router-link to="/user">用戶管理</router-link>&nbsp;
<router-link to="/about">關(guān)于我們</router-link>
<hr>
<router-view/>
</template>

User.vue

<template>
<h3>用戶管理</h3>
<hr>
<router-link to="/user/add">添加用戶</router-link>&nbsp;
<router-link to="/user/show">查看用戶</router-link>&nbsp;
<router-link to="/user/manager">管理用戶</router-link>&nbsp;
<hr>
<router-view/>
</template>

3.入口main.js導(dǎo)入使用

在src/main.js入口文件中

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import './assets/main.css'
const app = createApp(App)
app.use(createPinia())
app.use(router)
app.mount('#app')

route 重定向redirect

404

嵌套路由，子路由

在Goods.vue組件中，聲明router-link 和 子路由視口rounter-view

<template>
<h1>商品中心，商品列表</h1>
<br>
<br>
<router-link to="/goods/show">商品查看</router-link>&nbsp;
<router-link to="/goods/add">添加商品</router-link>&nbsp;
<router-link to="/goods/manager">商品管理</router-link>
<hr>
<router-view/>
</template>
Wechat:webrxwp - Mobile:13014577033 - Email:webrx@126.com - QQ:7031633 

a

{
path: '/goods',
component: () => import('../views/Goods.vue'),
//默認(rèn)進(jìn)入子路由manager
redirect: '/goods/manager',
children: [
{path: 'show', component: () => import('../views/GoodsShow.vue')},
{path: 'add', component: () => import('../views/GoodsAdd.vue')},
{path: 'manager', component: () => import('../views/GoodsManager.vue')},
]
}

編程式導(dǎo)航

原來(lái)的路由導(dǎo)航方式為聲明式導(dǎo)航，編程式導(dǎo)航，是通過(guò)路由組件對(duì)象的api編程方式，直接路由訪問(wèn)。 router.push(url) router.go(-1) router.back()

<template>
<h1>首頁(yè)</h1>
<button @click="goa(10)">about/10</button>
<button @click="goback(-3)">go-back</button>
</template>
<script lang="ts" setup>
import {useRouter} from 'vue-router'
const router = useRouter()
const goa = id => {
router.push(`/about/${id}`)
}
const goback = n =>{
router.go(n)
}
</script>
<style scoped>
</style>


// 字符串路徑
router.push('/users/eduardo')
// 帶有路徑的對(duì)象
router.push({ path: '/users/eduardo' })
// 命名的路由，并加上參數(shù)，讓路由建立 url
router.push({ name: 'user', params: { username: 'eduardo' } })
// 帶查詢參數(shù)，結(jié)果是 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })
// 帶 hash，結(jié)果是 /about#team
router.push({ path: '/about', hash: '#team' })

命名路由

定義路由 name:'about 命名

, {
path: '/about/:id(\\d+)',
name: 'about',
component: () => import('../views/About.vue'),
props: true
}

使用聲明式導(dǎo)航

<router-link :to="{name:'about',params:{id:10}}">about/10</router-link>

編程式導(dǎo)航

// 命名的路由，并加上參數(shù)，讓路由建立 url
router.push({ name: 'about', params:{ id: 10 }})

路由守衛(wèi)

全局導(dǎo)航守衛(wèi)會(huì)攔截每個(gè)路由規(guī)則，從而對(duì)每個(gè)路由訪問(wèn)權(quán)限的控制文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-732985.html

到了這里，關(guān)于vue Router路由的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！