Vue路由實現(xiàn)頁面跳轉(zhuǎn)的示例代碼
更新時間：2024年04月01日 08:31:40 作者：林月明
根據(jù)登錄的角色不一樣,實現(xiàn)不同的路由展示，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
一、需求說明
點擊不同的模塊實現(xiàn)頁面跳轉(zhuǎn)，如下點擊“員工管理”右側(cè)會顯示員工管理頁面，如下圖1；點擊“入住信息”右側(cè)會顯示入住信息，如下圖二
二、涉及文件
1、 主要上圖在這幾個文件中修改相關(guān)代碼
2、知識點整理
1）Vue Router 是 Vue 的官方路由，其組成有:
VueRouter:路由器類，根據(jù)路由請求在路由視圖中動態(tài)染選中的組件
<router-link>:請求鏈接組件，瀏覽器會解析成<a>
<router-view>:動態(tài)視圖組件，用來染展示與路由路徑對應(yīng)的組件
三、代碼參考
1、App.vue文件,動態(tài)展示組件
<template>
<div >
<!-- <h1>{{ message }}</h1> -->
<!-- <element-view></element-view> -->
<!--<emp-view></emp-view>-->
<!-- <Btest2-view></Btest2-view>-->
<router-view></router-view>
</div>
</template>
<script>
//import empView from './views/systemTest/empView.vue'
//import Btest2View from './views/systemTest/Btest2View.vue'
//import ElementView from './views/element/ElementView.vue'
export default {
//components: { empView },
//components: { ElementView },
components: { /*Btest2View*/ },
data() {
return {
message: "Hello world!"
}
},
methods: {
}
}
</script>
<style>
</style>
2、index.js文件，定義路由配置信息
import Vue from 'vue'
import VueRouter from 'vue-router'
//import HomeView from '../views/HomeView.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/B1',
name: 'Btest',
component: () => import('../views/systemTest/BtestView.vue')
},
{
path: '/B2',
name: 'Btest2',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import('../views/systemTest/Btest2View.vue')
},
{
path: '/',
redirect: '/B1'
}
]
const router = new VueRouter({
routes
})
export default router
3、main.js，導(dǎo)入路由信息，指定路由
import Vue from 'vue'
import App from './App.vue'
import router from './router'
//引入elementUI組件
import 'element-ui/lib/theme-chalk/index.css';
import ElementUI from 'element-ui';
//引入axios
import axios from 'axios'
//使用axios
Vue.prototype.axios=axios
Vue.config.productionTip = false
Vue.use(ElementUI);
new Vue({
router,
render: h => h(App)
}).$mount('#app')
4、請求鏈接組件
1)BtestView.vue文件
<template>
<div>
<el-container style="height: 800px; border: 1px solid #eee">
<el-header style="font-size: 40px;background-color: rgb(238, 241, 246)">智能學(xué)習(xí)輔助系統(tǒng)</el-header>
<el-container>
<el-aside width="230px" style=" border: 1px solid #eee">
<!-- 目錄</el-aside> -->
<!-- <br> -->
<el-menu :default-openeds="['1', '3']">
<el-submenu index="1">
<template slot="title"><i class="el-icon-message"></i>系統(tǒng)信息管理</template>
<el-menu-item-group>
<template slot="title">人力資源</template>
<el-submenu index="1-1">
<template slot="title">
<router-link to="/B1">員工管理</router-link>
</template>
<el-menu-item index="1-1-1">模塊1</el-menu-item>
<el-menu-item index="1-1-2">模塊2</el-menu-item>
</el-submenu>
<el-menu-item index="1-2">
<router-link to="/B2">入住信息</router-link>
</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-menu"></i>銷售產(chǎn)品</template>
<el-menu-item-group>
<template slot="title">產(chǎn)品1</template>
<el-menu-item index="2-1">產(chǎn)品2</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</el-aside>
<el-main>
<!--表單，可輸入查詢條件-->
<el-form :inline="true" :model="searchForm" class="demo-form-inline">
<el-form-item label="姓名">
<el-input v-model="searchForm.name" placeholder="謝遜"></el-input>
</el-form-item>
<el-form-item label="性別">
<el-select v-model="searchForm.source" placeholder="男">
<el-option label="男" value="1"></el-option>
<el-option label="女" value="2"></el-option>
</el-select>
</el-form-item>
<el-form-item label="入職日期">
<!--日期選擇-->
<el-date-picker
v-model="searchForm.TTM"
type="daterange"
range-separator="至"
start-placeholder="開始日期"
end-placeholder="結(jié)束日期">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查詢</el-button>
</el-form-item>
</el-form>
<!--表格-->
<el-table :data="tableData" border >
<el-table-column prop="name" label="姓名" width="140">
</el-table-column>
<el-table-column label="圖像" width="120">
<template slot-scope="scope">
<img :src="scope.row.image" width="90px" height="70px">
<!-- <img :src="homeIcon"> -->
</template>
</el-table-column>
<el-table-column label="性別" width="120">
<template slot-scope="scope">
{{ scope.row.gender==1?'男':'女' }}
</template>
</el-table-column>
<el-table-column prop="job" label="職稱" width="120">
</el-table-column>
<el-table-column prop="entrydate" label="入職日期" width="140">
</el-table-column>
<el-table-column prop="updatetime" label="上市時間" width="140">
</el-table-column>
<el-table-column label="操作">
<el-button type="primary" size="mini">編輯</el-button>
<el-button type="danger" size="mini">刪除</el-button>
</el-table-column>
</el-table>
<br>
<!--頁碼-->
<el-pagination background layout="total, sizes, prev, pager, next"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:total="100">
</el-pagination>
</el-main>
</el-container>
</el-container>
<!-- <img v-bind:src="craftWool.json.image" alt="" /> -->
<!-- <img :src=" require('@/assets/craftWool/'+img)" alt=""> -->
<!-- <img src="../../桂花兔.jpg\" alt="\"> -->
</div>
</template>
<script>
import axios from 'axios';
//import { Scope } from 'eslint-scope';
//let imgs= require('@/public/craftWool.json')
//console.img(imgs);
//var img = require('/test01/src/assets/craftWool/桂花兔.jpg');
//console.log(img);
//import homeIcon from '@/assets/craftWool/桂花兔.jpg'
export default {
data(){
return {
tableData: [],
searchForm:{
name:"",
gender:"",
entrydate:[]
},
//img:imgs.url
}
},
methods: {
onSubmit:function(){
},
handleSizeChange:function(val) {
console.log(`每頁 ${val} 條`);
alert("每頁記錄數(shù)變化"+val)
},
handleCurrentChange:function(val) {
console.log(`當(dāng)前頁: ${val}`);
alert("頁碼變化"+val)
}
},
mounted() {
//發(fā)送異步請求，獲取數(shù)據(jù)
//axios.get("http://test01/src/jsonData/craftWool.json").then((result)=>{//出錯，多了“/”
axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then((result)=>{//教程參考表格鏈接
//axios.get("/test01/public/craftWool.json").then((result)=>{
//成功回調(diào)
this.tableData=result.data.data;
//this.image = result.data.image;
//this.img=result.img.image;
});
}
}
</script>
<style scoped>
</style>2)Btest2View.vue文件
<template>
<div>
<el-container style="height: 800px; border: 1px solid #eee">
<el-header style="font-size: 40px;background-color: rgb(238, 241, 246)">智能學(xué)習(xí)輔助系統(tǒng)</el-header>
<el-container>
<el-aside width="230px" style=" border: 1px solid #eee">
<!-- 目錄</el-aside> -->
<!--
-->
<el-menu :default-openeds="['1', '3']">
<el-submenu index="1">
<template slot="title"><i class="el-icon-message"></i>系統(tǒng)信息管理</template>
<el-menu-item-group>
<template slot="title">人力資源</template>
<el-submenu index="1-1">
<template slot="title">
<router-link to="/B1">員工管理</router-link>
</template>
<el-menu-item index="1-1-1">模塊1</el-menu-item>
<el-menu-item index="1-1-2">模塊2</el-menu-item>
</el-submenu>
<el-menu-item index="1-2">
<router-link to="/B2">入住信息</router-link>
</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-menu"></i>銷售產(chǎn)品</template>
<el-menu-item-group>
<template slot="title">產(chǎn)品1</template>
<el-menu-item index="2-1">產(chǎn)品2</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</el-aside>
<el-main>
<el-table
:data="tableData"
stripe
style="width: 100%">
<el-table-column
prop="date"
label="入住日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</el-main>
</el-container>
</el-container>
<!-- <img v-bind:src="craftWool.json.image" alt="" /> -->
<!-- <img :src=" require('@/assets/craftWool/'+img)" alt=""> -->
<!-- <img src="../../桂花兔.jpg\" alt="\"> -->
</div>
</template>
<script>
//import axios from 'axios';
//import { Scope } from 'eslint-scope';
//let imgs= require('@/public/craftWool.json')
//console.img(imgs);
//var img = require('/test01/src/assets/craftWool/桂花兔.jpg');
//console.log(img);
//import homeIcon from '@/assets/craftWool/桂花兔.jpg'
export default {
data(){
return {
//nameData: [],
tableData: [{
date: '2016-05-02',
name: 'A',
address: '上海市普陀區(qū)金沙江路 001 弄'
}, {
date: '2016-05-04',
name: 'B',
address: '上海市普陀區(qū)金沙江路 002 弄'
}, {
date: '2016-05-01',
name: 'C',
address: '上海市普陀區(qū)金沙江路 003 弄'
}, {
date: '2016-05-03',
name: 'D',
address: '上海市普陀區(qū)金沙江路 004 弄'
}]
}
},
methods: {
onSubmit:function(){
},
handleSizeChange:function(val) {
console.log(`每頁 ${val} 條`);
alert("每頁記錄數(shù)變化"+val)
},
handleCurrentChange:function(val) {
console.log(`當(dāng)前頁: ${val}`);
alert("頁碼變化"+val)
}
},
mounted() {
//發(fā)送異步請求，獲取數(shù)據(jù)
//axios.get("http://test01/src/jsonData/craftWool.json").then((result)=>{//出錯，多了“/”
// axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then((result)=>{//教程參考表格鏈接
//axios.get("/test01/public/craftWool.json").then((result)=>{
//成功回調(diào)
// this.nameData=result.data.data.name;
//this.image = result.data.image;
//this.img=result.img.image;
// });
}
}
</script>
<style scoped>
</style>四、鏈接教程
1、Vue路由學(xué)習(xí)視頻鏈接https://www.bilibili.com/video/BV1m84y1w7Tb?p=48&vd_source=841fee104972680a6cac4dbdbf144b50
到此這篇關(guān)于Vue路由實現(xiàn)頁面跳轉(zhuǎn)的示例代碼的文章就介紹到這了,更多相關(guān)Vue路由實現(xiàn)頁面跳轉(zhuǎn)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本篇文章主要介紹了使用 Vue.js 仿百度搜索框的實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
這篇文章主要介紹了vue之keepAlive使用案例詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
vue-cli創(chuàng)建的項目中的gitHooks原理解析
這篇文章主要介紹了vue-cli創(chuàng)建的項目中的gitHooks原理解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
defineProperty和Proxy基礎(chǔ)功能及性能對比
這篇文章主要為大家介紹了defineProperty和Proxy基礎(chǔ)功能及性能對比，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
vue3輸入無效路由跳轉(zhuǎn)到指定error頁面問題
這篇文章主要介紹了vue3輸入無效路由跳轉(zhuǎn)到指定error頁面問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vue.js是現(xiàn)在流行的js框架之一,vue 是一套用于構(gòu)建用戶界面的漸進(jìn)式j(luò)avascript框架，這篇文章主要給大家介紹了關(guān)于vue移動端實現(xiàn)左滑編輯與刪除的相關(guān)資料,需要的朋友可以參考下2021-05-05
這篇文章主要介紹了Vue 前端導(dǎo)出后端返回的excel文件方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
混入mixin提供了一種非常靈活的方式，來分發(fā)Vue組件中的可復(fù)用功能，一個混入對象可以包含任意組件選項，接下來通過本文給大家介紹VUE?mixin?使用,需要的朋友可以參考下2022-08-08
vue+element下日期組件momentjs轉(zhuǎn)換賦值問題解決
這篇文章主要介紹了vue+element下日期組件momentjs轉(zhuǎn)換賦值問題,記錄下使用momentjs轉(zhuǎn)換日期字符串賦值給element的日期組件報錯問題，需要的朋友可以參考下2024-02-02
elementUI樣式修改未生效問題詳解(掛載到了body標(biāo)簽上)
vue+elementUI項目開發(fā)中,經(jīng)常遇到修改elementUI組件樣式無效的問題,這篇文章主要給大家介紹了關(guān)于elementUI樣式修改未生效問題的相關(guān)資料,掛載到了body標(biāo)簽上,需要的朋友可以參考下2023-04-04