• 【Vue基础】Vue路由，实现页面跳转

    一、需求说明

    点击不同的模块实现页面跳转，如下点击“员工管理”右侧会显示员工管理页面，如下图1；点击“入住信息”右侧会显示入住信息，如下图二

    二、涉及文件

    1、 主要上图在这几个文件中修改相关代码

    2、知识点整理

    1）Vue Router 是 Vue 的官方路由，其组成有:

    VueRouter:路由器类，根据路由请求在路由视图中动态染选中的组件

    <router-link>:请求链接组件，浏览器会解析成

    <router-view>:动态视图组件，用来染展示与路由路径对应的组件

    三、代码参考

    1、App.vue文件,动态展示组件

    1. <template>
    2.   <div >
    3.     <!-- <h1>{{ message }}</h1> -->
    4.     <!-- <element-view></element-view> -->
    5.     <!--<emp-view></emp-view>-->
    6.    <!-- <Btest2-view></Btest2-view>-->
    7.    <router-view></router-view>
    8.   </div>
    9. </template>
    10.  
    11. <script>
    12. //import empView from './views/systemTest/empView.vue'
    13. //import Btest2View from './views/systemTest/Btest2View.vue'
    14. //import ElementView from './views/element/ElementView.vue'
    15. export default {
    16.   //components: { empView },
    17.   //components: { ElementView },
    18.   components: { /*Btest2View*/ },
    19.   data() {
    20.     return {
    21.       message: "Hello world!" 
    22.     }
    23.   },
    24.   methods: {
    25.     
    26.   }
    27. }
    28. </script>
    29.  
    30. <style>
    31.  
    32. </style>

    2、index.js文件，定义路由配置信息

    1. import Vue from 'vue'
    2. import VueRouter from 'vue-router'
    3. //import HomeView from '../views/HomeView.vue'
    4.  
    5. Vue.use(VueRouter)
    6.  
    7. const routes = [
    8.   {
    9.     path: '/B1',
    10.     name: 'Btest',
    11.     component: () => import('../views/systemTest/BtestView.vue')
    12.   },
    13.   {
    14.     path: '/B2',
    15.     name: 'Btest2',
    16.     // route level code-splitting
    17.     // this generates a separate chunk (about.[hash].js) for this route
    18.     // which is lazy-loaded when the route is visited.
    19.     component: () => import('../views/systemTest/Btest2View.vue')
    20.   },
    21.   {
    22.     path: '/',
    23.     redirect: '/B1'
    24.   }
    25. ]
    26.  
    27. const router = new VueRouter({
    28.   routes
    29. })
    30.  
    31. export default router

    3、main.js，导入路由信息，指定路由

    1. import Vue from 'vue'
    2. import App from './App.vue'
    3. import router from './router'
    4. //引入elementUI组件
    5. import 'element-ui/lib/theme-chalk/index.css';
    6. import ElementUI from 'element-ui';
    7. //引入axios
    8. import axios from 'axios'
    9. //使用axios
    10. Vue.prototype.axios=axios
    11.  
    12. Vue.config.productionTip = false
    13. Vue.use(ElementUI);
    14.  
    15. new Vue({
    16.   router,
    17.   render: h => h(App)
    18. }).$mount('#app')

    4、请求链接组件

    1)BtestView.vue文件

    1. <template>
    2.     <div>
    3.         <el-container style="height: 800px; border: 1px solid #eee">
    4.             <el-header style="font-size: 40px;background-color: rgb(238, 241, 246)">智能学习辅助系统</el-header>
    5.  
    6.             <el-container>
    7.                 <el-aside width="230px" style=" border: 1px solid #eee">
    8.                     <!-- 目录</el-aside> -->
    9.                     <!-- <br> -->
    10.                     <el-menu :default-openeds="['1', '3']">
    11.                     <el-submenu index="1">
    12.                         <template slot="title"><i class="el-icon-message"></i>系统信息管理</template>
    13.                         <el-menu-item-group>
    14.                         <template slot="title">人力资源</template>
    15.                         <el-submenu index="1-1">
    16.                         <template slot="title">
    17.                             <router-link to="/B1">员工管理</router-link>
    18.                         </template>
    19.                         <el-menu-item index="1-1-1">模块1</el-menu-item>
    20.                         <el-menu-item index="1-1-2">模块2</el-menu-item>
    21.                         </el-submenu>
    22.                         <el-menu-item index="1-2">
    23.                             <router-link to="/B2">入住信息</router-link>
    24.                         </el-menu-item>                           
    25.                         </el-menu-item-group> 
    26.                     </el-submenu>            
    27.                 <el-submenu index="2">
    28.                         <template slot="title"><i class="el-icon-menu"></i>销售产品</template>
    29.                         <el-menu-item-group>
    30.                         <template slot="title">产品1</template>
    31.                         <el-menu-item index="2-1">产品2</el-menu-item>        
    32.                         </el-menu-item-group>           
    33.                     </el-submenu>        
    34.                     </el-menu>
    35.                 </el-aside> 
    36.         
    37.             <el-main>
    38.                 <!--表单，可输入查询条件-->
    39.                 <el-form :inline="true" :model="searchForm" class="demo-form-inline">
    40.                 <el-form-item label="姓名">
    41.                     <el-input v-model="searchForm.name" placeholder="谢逊"></el-input>
    42.                 </el-form-item>
    43.                 <el-form-item label="性别">
    44.                     <el-select v-model="searchForm.source" placeholder="男">
    45.                     <el-option label="男" value="1"></el-option>
    46.                     <el-option label="女" value="2"></el-option>
    47.                     </el-select>
    48.                 </el-form-item>           
    49.                 <el-form-item label="入职日期">
    50.                     <!--日期选择-->
    51.                     <el-date-picker
    52.                     v-model="searchForm.TTM"
    53.                     type="daterange"
    54.                     range-separator="至"
    55.                     start-placeholder="开始日期"
    56.                     end-placeholder="结束日期">
    57.                     </el-date-picker>                       
    58.                 </el-form-item>
    59.                 <el-form-item>
    60.                     <el-button type="primary" @click="onSubmit">查询</el-button>
    61.                 </el-form-item>
    62.                 </el-form>
    63.  
    64.                 <!--表格-->
    65.                 <el-table :data="tableData" border >
    66.                 <el-table-column prop="name" label="姓名" width="140">
    67.                 </el-table-column>
    68.                 <el-table-column  label="图像" width="120">
    69.                     <template slot-scope="scope">
    70.                         <img :src="scope.row.image" width="90px" height="70px">
    71.                         <!-- <img :src="homeIcon"> -->
    72.                     </template>
    73.                 </el-table-column>
    74.                 <el-table-column  label="性别" width="120">
    75.                     <template slot-scope="scope">
    76.                         {{ scope.row.gender==1?'男':'女' }}
    77.                     </template>   
    78.                 </el-table-column>
    79.                 <el-table-column prop="job" label="职称" width="120">
    80.                 </el-table-column>
    81.                 <el-table-column prop="entrydate" label="入职日期" width="140">
    82.                 </el-table-column>
    83.                 <el-table-column prop="updatetime" label="上市时间" width="140">
    84.                 </el-table-column>
    85.                 <el-table-column label="操作">
    86.                     <el-button type="primary" size="mini">编辑</el-button>
    87.                     <el-button type="danger" size="mini">删除</el-button>
    88.                 </el-table-column>
    89.                 </el-table>
    90.                 <br>
    91.              
    92.       <!--页码-->
    93.             <el-pagination background  layout="total, sizes, prev, pager, next"
    94.                 @size-change="handleSizeChange"
    95.                 @current-change="handleCurrentChange"
    96.                 :total="100">
    97.             </el-pagination>
    98.             </el-main>
    99.             </el-container>
    100.         </el-container>
    101.  
    102.         <!-- <img v-bind:src="craftWool.json.image" alt="" /> -->
    103.         <!-- <img :src=" require('@/assets/craftWool/'+img)" alt=""> -->
    104.         <!-- <img src="../../桂花兔.jpg\" alt="\"> -->
    105.  
    106.  
    107.     </div>
    108.  
    109. </template>
    110. <script>
    111. import axios from 'axios';
    112. //import { Scope } from 'eslint-scope';
    113. //let imgs= require('@/public/craftWool.json')
    114. //console.img(imgs);
    115. //var img = require('/test01/src/assets/craftWool/桂花兔.jpg');
    116. //console.log(img);
    117. //import homeIcon from '@/assets/craftWool/桂花兔.jpg'
    118.  
    119.  
    120. export default {
    121.     data(){
    122.         return {
    123.         tableData: [],
    124.         searchForm:{
    125.             name:"",
    126.             gender:"",
    127.             entrydate:[]
    128.         },
    129.         //img:imgs.url
    130.       }
    131.     },
    132.     methods: {
    133.         onSubmit:function(){
    134.  
    135.         },
    136.         handleSizeChange:function(val) {
    137.             console.log(`每页 ${val} 条`);
    138.             alert("每页记录数变化"+val)
    139.         },
    140.         handleCurrentChange:function(val) {
    141.             console.log(`当前页: ${val}`);
    142.             alert("页码变化"+val)
    143.         }
    144.     },
    145.     mounted() {
    146.         //发送异步请求，获取数据
    147.         //axios.get("//test01/src/jsonData/craftWool.json").then((result)=>{//出错，多了“/”
    148.         axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then((result)=>{//教程参考表格链接
    149.         //axios.get("/test01/public/craftWool.json").then((result)=>{
    150.             //成功回调
    151.             this.tableData=result.data.data;
    152.             //this.image = result.data.image;
    153.             //this.img=result.img.image;
    154.         });
    155.  
    156.     }
    157. }
    158. </script>
    159. <style scoped>
    160.  
    161. </style>

    2)Btest2View.vue文件

    1. <template>
    2.     <div>
    3.         <el-container style="height: 800px; border: 1px solid #eee">
    4.             <el-header style="font-size: 40px;background-color: rgb(238, 241, 246)">智能学习辅助系统</el-header>
    5.  
    6.             <el-container>
    7.                 <el-aside width="230px" style=" border: 1px solid #eee">
    8.                     <!-- 目录</el-aside> -->
    9.                     <!-- <br> -->
    10.                     <el-menu :default-openeds="['1', '3']">
    11.                     <el-submenu index="1">
    12.                         <template slot="title"><i class="el-icon-message"></i>系统信息管理</template>
    13.                         <el-menu-item-group>
    14.                         <template slot="title">人力资源</template>
    15.                         <el-submenu index="1-1">
    16.                         <template slot="title">
    17.                             <router-link to="/B1">员工管理</router-link>
    18.                         </template>
    19.                         <el-menu-item index="1-1-1">模块1</el-menu-item>
    20.                         <el-menu-item index="1-1-2">模块2</el-menu-item>
    21.                         </el-submenu>
    22.                         <el-menu-item index="1-2">
    23.                             <router-link to="/B2">入住信息</router-link>
    24.                         </el-menu-item>                           
    25.                         </el-menu-item-group> 
    26.                     </el-submenu>            
    27.                 <el-submenu index="2">
    28.                         <template slot="title"><i class="el-icon-menu"></i>销售产品</template>
    29.                         <el-menu-item-group>
    30.                         <template slot="title">产品1</template>
    31.                         <el-menu-item index="2-1">产品2</el-menu-item>        
    32.                         </el-menu-item-group>           
    33.                     </el-submenu>        
    34.                     </el-menu>
    35.                 </el-aside> 
    36.         
    37.             <el-main>
    38.                 <el-table
    39.                 :data="tableData"
    40.                 stripe
    41.                 style="width: 100%">
    42.                 <el-table-column
    43.                 
    44.                 prop="date"
    45.                 label="入住日期"
    46.                 width="180">
    47.                 </el-table-column>
    48.                 <el-table-column
    49.                 
    50.                 prop="name"
    51.                 label="姓名"
    52.                 width="180">
    53.                 </el-table-column>
    54.                 <el-table-column
    55.                 
    56.                 prop="address"
    57.                 label="地址">
    58.                 </el-table-column>
    59.                 
    60.             </el-table>
    61.             </el-main>
    62.             </el-container>
    63.         </el-container>
    64.  
    65.         <!-- <img v-bind:src="craftWool.json.image" alt="" /> -->
    66.         <!-- <img :src=" require('@/assets/craftWool/'+img)" alt=""> -->
    67.         <!-- <img src="../../桂花兔.jpg\" alt="\"> -->
    68.  
    69.  
    70.     </div>
    71.  
    72. </template>
    73. <script>
    74. //import axios from 'axios';
    75. //import { Scope } from 'eslint-scope';
    76. //let imgs= require('@/public/craftWool.json')
    77. //console.img(imgs);
    78. //var img = require('/test01/src/assets/craftWool/桂花兔.jpg');
    79. //console.log(img);
    80. //import homeIcon from '@/assets/craftWool/桂花兔.jpg'
    81.  
    82.  
    83. export default {
    84.     data(){
    85.         return {
    86.         //nameData: [],
    87.         tableData: [{
    88.           date: '2016-05-02',
    89.           name: 'A',
    90.           address: '上海市普陀区金沙江路 001 弄'
    91.         }, {
    92.           date: '2016-05-04',
    93.           name:  'B',
    94.           address: '上海市普陀区金沙江路 002 弄'
    95.         }, {
    96.           date: '2016-05-01',
    97.           name:  'C',
    98.           address: '上海市普陀区金沙江路 003 弄'
    99.         }, {
    100.           date: '2016-05-03',
    101.           name:  'D',
    102.           address: '上海市普陀区金沙江路 004 弄'
    103.         }]
    104.         
    105.     }
    106.     
    107.     },
    108.    
    109.     methods: {
    110.         onSubmit:function(){
    111.  
    112.         },
    113.         handleSizeChange:function(val) {
    114.             console.log(`每页 ${val} 条`);
    115.             alert("每页记录数变化"+val)
    116.         },
    117.         handleCurrentChange:function(val) {
    118.             console.log(`当前页: ${val}`);
    119.             alert("页码变化"+val)
    120.         }
    121.     },
    122.     mounted() {
    123.         //发送异步请求，获取数据
    124.         //axios.get("//test01/src/jsonData/craftWool.json").then((result)=>{//出错，多了“/”
    125.        // axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then((result)=>{//教程参考表格链接
    126.         //axios.get("/test01/public/craftWool.json").then((result)=>{
    127.             //成功回调
    128.            // this.nameData=result.data.data.name;
    129.             //this.image = result.data.image;
    130.             //this.img=result.img.image;
    131.        // });
    132.  
    133.     }
    134. }
    135. </script>
    136. <style scoped>
    137.  
    138. </style>

    四、链接教程

    1、Vue路由学习视频链接https://www.bilibili.com/video/BV1m84y1w7Tb?p=48&vd_source=841fee104972680a6cac4dbdbf144b50

  • 相关阅读:
    SAR雷达系统反设计及典型目标建模与仿真实现研究——目标生成与检测（Matlab代码实现）
    随机生成指定位数的字母数字组合的账号或密码
    启动mysql 3.5时出现 MySql 服务正在启动 . MySql 服务无法启动。
    基于Web的商城后台管理系统的设计与实现
    docker安装openGauss数据库
    vue中使用h5 video标签实现弹窗播放本地视频
    【Qt】窗口和对话框区别、主窗口和二级窗口区别、QMainWindow和QDialog区别
    解决npm报错Error: error:0308010C:digital envelope routines::unsupported
    excel如何让线条消失，直接设置网格即可，碰到不方便的地方优先百度，再采取蛮干
    Oracle整体架构
  • 原文地址：https://blog.csdn.net/qq_42294095/article/details/130826622