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

偏执的太偏执、 2023-10-11 22:04 125阅读 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>
  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. </script>
  28. <style>
  29. </style>

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

  1. import Vue from 'vue'
  2. import VueRouter from 'vue-router'
  3. //import HomeView from '../views/HomeView.vue'
  4. Vue.use(VueRouter)
  5. const routes = [
  6. {
  7. path: '/B1',
  8. name: 'Btest',
  9. component: () => import('../views/systemTest/BtestView.vue')
  10. },
  11. {
  12. path: '/B2',
  13. name: 'Btest2',
  14. // route level code-splitting
  15. // this generates a separate chunk (about.[hash].js) for this route
  16. // which is lazy-loaded when the route is visited.
  17. component: () => import('../views/systemTest/Btest2View.vue')
  18. },
  19. {
  20. path: '/',
  21. redirect: '/B1'
  22. }
  23. ]
  24. const router = new VueRouter({
  25. routes
  26. })
  27. 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. Vue.config.productionTip = false
  12. Vue.use(ElementUI);
  13. new Vue({
  14. router,
  15. render: h => h(App)
  16. }).$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. <el-container>
  6. <el-aside width="230px" style=" border: 1px solid #eee">
  7. <!-- 目录</el-aside> -->
  8. <!-- <br> -->
  9. <el-menu :default-openeds="['1', '3']">
  10. <el-submenu index="1">
  11. <template slot="title"><i class="el-icon-message"></i>系统信息管理</template>
  12. <el-menu-item-group>
  13. <template slot="title">人力资源</template>
  14. <el-submenu index="1-1">
  15. <template slot="title">
  16. <router-link to="/B1">员工管理</router-link>
  17. </template>
  18. <el-menu-item index="1-1-1">模块1</el-menu-item>
  19. <el-menu-item index="1-1-2">模块2</el-menu-item>
  20. </el-submenu>
  21. <el-menu-item index="1-2">
  22. <router-link to="/B2">入住信息</router-link>
  23. </el-menu-item>
  24. </el-menu-item-group>
  25. </el-submenu>
  26. <el-submenu index="2">
  27. <template slot="title"><i class="el-icon-menu"></i>销售产品</template>
  28. <el-menu-item-group>
  29. <template slot="title">产品1</template>
  30. <el-menu-item index="2-1">产品2</el-menu-item>
  31. </el-menu-item-group>
  32. </el-submenu>
  33. </el-menu>
  34. </el-aside>
  35. <el-main>
  36. <!--表单,可输入查询条件-->
  37. <el-form :inline="true" :model="searchForm" class="demo-form-inline">
  38. <el-form-item label="姓名">
  39. <el-input v-model="searchForm.name" placeholder="谢逊"></el-input>
  40. </el-form-item>
  41. <el-form-item label="性别">
  42. <el-select v-model="searchForm.source" placeholder="男">
  43. <el-option label="男" value="1"></el-option>
  44. <el-option label="女" value="2"></el-option>
  45. </el-select>
  46. </el-form-item>
  47. <el-form-item label="入职日期">
  48. <!--日期选择-->
  49. <el-date-picker
  50. v-model="searchForm.TTM"
  51. type="daterange"
  52. range-separator="至"
  53. start-placeholder="开始日期"
  54. end-placeholder="结束日期">
  55. </el-date-picker>
  56. </el-form-item>
  57. <el-form-item>
  58. <el-button type="primary" @click="onSubmit">查询</el-button>
  59. </el-form-item>
  60. </el-form>
  61. <!--表格-->
  62. <el-table :data="tableData" border >
  63. <el-table-column prop="name" label="姓名" width="140">
  64. </el-table-column>
  65. <el-table-column label="图像" width="120">
  66. <template slot-scope="scope">
  67. <img :src="scope.row.image" width="90px" height="70px">
  68. <!-- <img :src="homeIcon"> -->
  69. </template>
  70. </el-table-column>
  71. <el-table-column label="性别" width="120">
  72. <template slot-scope="scope">
  73. {
  74. { scope.row.gender==1?'男':'女' }}
  75. </template>
  76. </el-table-column>
  77. <el-table-column prop="job" label="职称" width="120">
  78. </el-table-column>
  79. <el-table-column prop="entrydate" label="入职日期" width="140">
  80. </el-table-column>
  81. <el-table-column prop="updatetime" label="上市时间" width="140">
  82. </el-table-column>
  83. <el-table-column label="操作">
  84. <el-button type="primary" size="mini">编辑</el-button>
  85. <el-button type="danger" size="mini">删除</el-button>
  86. </el-table-column>
  87. </el-table>
  88. <br>
  89. <!--页码-->
  90. <el-pagination background layout="total, sizes, prev, pager, next"
  91. @size-change="handleSizeChange"
  92. @current-change="handleCurrentChange"
  93. :total="100">
  94. </el-pagination>
  95. </el-main>
  96. </el-container>
  97. </el-container>
  98. <!-- <img v-bind:src="craftWool.json.image" alt="" /> -->
  99. <!-- <img :src=" require('@/assets/craftWool/'+img)" alt=""> -->
  100. <!-- <img src="../../桂花兔.jpg\" alt="\"> -->
  101. </div>
  102. </template>
  103. <script>
  104. import axios from 'axios';
  105. //import { Scope } from 'eslint-scope';
  106. //let imgs= require('@/public/craftWool.json')
  107. //console.img(imgs);
  108. //var img = require('/test01/src/assets/craftWool/桂花兔.jpg');
  109. //console.log(img);
  110. //import homeIcon from '@/assets/craftWool/桂花兔.jpg'
  111. export default {
  112. data(){
  113. return {
  114. tableData: [],
  115. searchForm:{
  116. name:"",
  117. gender:"",
  118. entrydate:[]
  119. },
  120. //img:imgs.url
  121. }
  122. },
  123. methods: {
  124. onSubmit:function(){
  125. },
  126. handleSizeChange:function(val) {
  127. console.log(`每页 ${val} 条`);
  128. alert("每页记录数变化"+val)
  129. },
  130. handleCurrentChange:function(val) {
  131. console.log(`当前页: ${val}`);
  132. alert("页码变化"+val)
  133. }
  134. },
  135. mounted() {
  136. //发送异步请求,获取数据
  137. //axios.get("//test01/src/jsonData/craftWool.json").then((result)=>{//出错,多了“/”
  138. axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then((result)=>{//教程参考表格链接
  139. //axios.get("/test01/public/craftWool.json").then((result)=>{
  140. //成功回调
  141. this.tableData=result.data.data;
  142. //this.image = result.data.image;
  143. //this.img=result.img.image;
  144. });
  145. }
  146. }
  147. </script>
  148. <style scoped>
  149. </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. <el-container>
  6. <el-aside width="230px" style=" border: 1px solid #eee">
  7. <!-- 目录</el-aside> -->
  8. <!-- <br> -->
  9. <el-menu :default-openeds="['1', '3']">
  10. <el-submenu index="1">
  11. <template slot="title"><i class="el-icon-message"></i>系统信息管理</template>
  12. <el-menu-item-group>
  13. <template slot="title">人力资源</template>
  14. <el-submenu index="1-1">
  15. <template slot="title">
  16. <router-link to="/B1">员工管理</router-link>
  17. </template>
  18. <el-menu-item index="1-1-1">模块1</el-menu-item>
  19. <el-menu-item index="1-1-2">模块2</el-menu-item>
  20. </el-submenu>
  21. <el-menu-item index="1-2">
  22. <router-link to="/B2">入住信息</router-link>
  23. </el-menu-item>
  24. </el-menu-item-group>
  25. </el-submenu>
  26. <el-submenu index="2">
  27. <template slot="title"><i class="el-icon-menu"></i>销售产品</template>
  28. <el-menu-item-group>
  29. <template slot="title">产品1</template>
  30. <el-menu-item index="2-1">产品2</el-menu-item>
  31. </el-menu-item-group>
  32. </el-submenu>
  33. </el-menu>
  34. </el-aside>
  35. <el-main>
  36. <el-table
  37. :data="tableData"
  38. stripe
  39. style="width: 100%">
  40. <el-table-column
  41. prop="date"
  42. label="入住日期"
  43. width="180">
  44. </el-table-column>
  45. <el-table-column
  46. prop="name"
  47. label="姓名"
  48. width="180">
  49. </el-table-column>
  50. <el-table-column
  51. prop="address"
  52. label="地址">
  53. </el-table-column>
  54. </el-table>
  55. </el-main>
  56. </el-container>
  57. </el-container>
  58. <!-- <img v-bind:src="craftWool.json.image" alt="" /> -->
  59. <!-- <img :src=" require('@/assets/craftWool/'+img)" alt=""> -->
  60. <!-- <img src="../../桂花兔.jpg\" alt="\"> -->
  61. </div>
  62. </template>
  63. <script>
  64. //import axios from 'axios';
  65. //import { Scope } from 'eslint-scope';
  66. //let imgs= require('@/public/craftWool.json')
  67. //console.img(imgs);
  68. //var img = require('/test01/src/assets/craftWool/桂花兔.jpg');
  69. //console.log(img);
  70. //import homeIcon from '@/assets/craftWool/桂花兔.jpg'
  71. export default {
  72. data(){
  73. return {
  74. //nameData: [],
  75. tableData: [{
  76. date: '2016-05-02',
  77. name: 'A',
  78. address: '上海市普陀区金沙江路 001 弄'
  79. }, {
  80. date: '2016-05-04',
  81. name: 'B',
  82. address: '上海市普陀区金沙江路 002 弄'
  83. }, {
  84. date: '2016-05-01',
  85. name: 'C',
  86. address: '上海市普陀区金沙江路 003 弄'
  87. }, {
  88. date: '2016-05-03',
  89. name: 'D',
  90. address: '上海市普陀区金沙江路 004 弄'
  91. }]
  92. }
  93. },
  94. methods: {
  95. onSubmit:function(){
  96. },
  97. handleSizeChange:function(val) {
  98. console.log(`每页 ${val} 条`);
  99. alert("每页记录数变化"+val)
  100. },
  101. handleCurrentChange:function(val) {
  102. console.log(`当前页: ${val}`);
  103. alert("页码变化"+val)
  104. }
  105. },
  106. mounted() {
  107. //发送异步请求,获取数据
  108. //axios.get("//test01/src/jsonData/craftWool.json").then((result)=>{//出错,多了“/”
  109. // axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then((result)=>{//教程参考表格链接
  110. //axios.get("/test01/public/craftWool.json").then((result)=>{
  111. //成功回调
  112. // this.nameData=result.data.data.name;
  113. //this.image = result.data.image;
  114. //this.img=result.img.image;
  115. // });
  116. }
  117. }
  118. </script>
  119. <style scoped>
  120. </style>

四、链接教程

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

发表评论

表情:
评论列表 (有 0 条评论,125人围观)

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

相关阅读

    相关 Vue

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

    相关 Vue

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