Vue路由實現(xiàn)頁面跳轉(zhuǎn)的示例代碼

更新時間：2024年04月01日 08:31:40 作者：林月明

根據(jù)登錄的角色不一樣,實現(xiàn)不同的路由展示，文中通過示例代碼介紹的非常詳細，需要的朋友們下面隨著小編來一起學(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>