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

偏执的太偏执、 2023-10-11 22:04 133阅读 0赞

一、需求说明

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

7cf2eb2df4a6490795d082cceb92eb60.png

2ad8ad4784994c40a65546228cf4a751.png

二、涉及文件

566ed321be1b40ac92f62ebd698d908f.png

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

2、知识点整理

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

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

:请求链接组件，浏览器会解析成

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

三、代码参考

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

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

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

  1. import Vue from 'vue'
  2. import VueRouter from 'vue-router'
  3. //import HomeView from '../views/HomeView.vue'
  5. Vue.use(VueRouter)
  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. ]
  27. const router = new VueRouter({
  28.   routes
  29. })
  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
  12. Vue.config.productionTip = false
  13. Vue.use(ElementUI);
  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>
  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> 
  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>
  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.                         {
  77.    { scope.row.gender==1?'男':'女' }}
  78.                     </template>   
  79.                 </el-table-column>
  80.                 <el-table-column prop="job" label="职称" width="120">
  81.                 </el-table-column>
  82.                 <el-table-column prop="entrydate" label="入职日期" width="140">
  83.                 </el-table-column>
  84.                 <el-table-column prop="updatetime" label="上市时间" width="140">
  85.                 </el-table-column>
  86.                 <el-table-column label="操作">
  87.                     <el-button type="primary" size="mini">编辑</el-button>
  88.                     <el-button type="danger" size="mini">删除</el-button>
  89.                 </el-table-column>
  90.                 </el-table>
  91.                 <br>
  93.       <!--页码-->
  94.             <el-pagination background  layout="total, sizes, prev, pager, next"
  95.                 @size-change="handleSizeChange"
  96.                 @current-change="handleCurrentChange"
  97.                 :total="100">
  98.             </el-pagination>
  99.             </el-main>
  100.             </el-container>
  101.         </el-container>
  103.         <!-- <img v-bind:src="craftWool.json.image" alt="" /> -->
  104.         <!-- <img :src=" require('@/assets/craftWool/'+img)" alt=""> -->
  105.         <!-- <img src="../../桂花兔.jpg\" alt="\"> -->
  108.     </div>
  110. </template>
  111. <script>
  112. import axios from 'axios';
  113. //import { Scope } from 'eslint-scope';
  114. //let imgs= require('@/public/craftWool.json')
  115. //console.img(imgs);
  116. //var img = require('/test01/src/assets/craftWool/桂花兔.jpg');
  117. //console.log(img);
  118. //import homeIcon from '@/assets/craftWool/桂花兔.jpg'
  121. export default {
  122.     data(){
  123.         return {
  124.         tableData: [],
  125.         searchForm:{
  126.             name:"",
  127.             gender:"",
  128.             entrydate:[]
  129.         },
  130.         //img:imgs.url
  131.       }
  132.     },
  133.     methods: {
  134.         onSubmit:function(){
  136.         },
  137.         handleSizeChange:function(val) {
  138.             console.log(`每页 ${val} 条`);
  139.             alert("每页记录数变化"+val)
  140.         },
  141.         handleCurrentChange:function(val) {
  142.             console.log(`当前页: ${val}`);
  143.             alert("页码变化"+val)
  144.         }
  145.     },
  146.     mounted() {
  147.         //发送异步请求，获取数据
  148.         //axios.get("//test01/src/jsonData/craftWool.json").then((result)=>{//出错，多了“/”
  149.         axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then((result)=>{//教程参考表格链接
  150.         //axios.get("/test01/public/craftWool.json").then((result)=>{
  151.             //成功回调
  152.             this.tableData=result.data.data;
  153.             //this.image = result.data.image;
  154.             //this.img=result.img.image;
  155.         });
  157.     }
  158. }
  159. </script>
  160. <style scoped>
  162. </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>
  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> 
  37.             <el-main>
  38.                 <el-table
  39.                 :data="tableData"
  40.                 stripe
  41.                 style="width: 100%">
  42.                 <el-table-column
  44.                 prop="date"
  45.                 label="入住日期"
  46.                 width="180">
  47.                 </el-table-column>
  48.                 <el-table-column
  50.                 prop="name"
  51.                 label="姓名"
  52.                 width="180">
  53.                 </el-table-column>
  54.                 <el-table-column
  56.                 prop="address"
  57.                 label="地址">
  58.                 </el-table-column>
  60.             </el-table>
  61.             </el-main>
  62.             </el-container>
  63.         </el-container>
  65.         <!-- <img v-bind:src="craftWool.json.image" alt="" /> -->
  66.         <!-- <img :src=" require('@/assets/craftWool/'+img)" alt=""> -->
  67.         <!-- <img src="../../桂花兔.jpg\" alt="\"> -->
  70.     </div>
  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'
  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.         }]
  105.     }
  107.     },
  109.     methods: {
  110.         onSubmit:function(){
  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.        // });
  133.     }
  134. }
  135. </script>
  136. <style scoped>
  138. </style>

四、链接教程

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

发表评论

表情：
评论列表 （有 0 条评论，133人围观）

还没有评论，来说两句吧...

相关阅读

    相关 【Vue】路由跳转

    [【Vue】路由跳转][Vue] 路由跳转有几种方式，我用的最多的是$router.push的方法： 实践： 例如下面的页面，要求点详情跳转到详情页。 ![在这里

    悠悠悠悠/ 0 赞/ 607 阅读

    相关 【Vue】路由跳转

    路由跳转有几种方式，我用的最多的是$router.push的方法： 实践： 例如下面的页面，要求点详情跳转到详情页。 ![在这里插入图片描述][watermark_

    清疚清疚/ 0 赞/ 569 阅读