當(dāng)前位置：首頁 > 前端技术 > vue >内容正文

vue

031_vue编程式导航

發(fā)布時(shí)間：2025/5/22 vue 51 豆豆

生活随笔收集整理的這篇文章主要介紹了 031_vue编程式导航小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

1. 頁面導(dǎo)航的兩種方式

1.1. 聲明式導(dǎo)航: 通過點(diǎn)擊鏈接實(shí)現(xiàn)導(dǎo)航的方式, 叫做聲明式導(dǎo)航。例如: 普通網(wǎng)頁中的<a></a>鏈接或vue中的<router-link></router-link>。

1.2. 編程式導(dǎo)航: 通過調(diào)用JavaScript形式的API實(shí)現(xiàn)導(dǎo)航的方式, 叫做編程式導(dǎo)航。例如: 普通網(wǎng)頁中的location.href。

1.3.?vue中的編程式導(dǎo)航

1.3.1.?this.$router.push('hash地址');

1.3.2.?this.$router.go(n);

1.4.?router.push()方法的參數(shù)規(guī)則

// 路徑名稱 router.push('/user'); // 對(duì)象路徑 router.push({path: '/user'}); // 命名路由傳遞參數(shù) router.push({name: '/user_alias', params: {id: 1}}); // 帶查詢參數(shù), 變成/user?uname=lisi router.push({path: '/user', query: {uname: 'lisi'}});

1.5.?代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>編程式導(dǎo)航</title></head><body><div id="app"><router-link to="/user/1">User1</router-link><router-link to="/user/2">User2</router-link><router-link :to="{ name: 'user_alias', params: {id: 3} }">User3</router-link><router-link to="/register">Register</router-link><router-view></router-view></div><script type="text/javascript" src="vue.min.js"></script><script src="vue-router_3.0.2.js"></script><script type="text/javascript">const user = {props: ['id', 'uname', 'age'],template: `<div><h1>User組件 -- 用戶id為: {{id}} -- 姓名為: {{uname}} -- 年齡為: {{age}}</h1><button @click="goRegister">跳轉(zhuǎn)到注冊(cè)頁面</button></div>`,methods: {goRegister() {this.$router.push('/register');}},};const register = {template: `<div><h1>Register組件</h1><button @click="goBack">后退</button></div>`,methods: {goBack() {this.$router.go(-1);}},};// 創(chuàng)建路由實(shí)例對(duì)象const router = new VueRouter({routes: [{ path: '/', redirect: '/user/3' },{ // 命名路由name: 'user_alias',path: '/user/:id', component: user, props: route => ({ uname: 'zs', age: 20, id: route.params.id }) },{ path: '/register', component: register }]});var vm = new Vue({el: "#app",router: router});</script></body> </html>

1.6.?效果圖

總結(jié)

以上是生活随笔為你收集整理的031_vue编程式导航的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

程式
_vue