手摸手Element-ui路由VueRoute

后端WebAPI准备

https://router.vuejs.org/zh/guide/

https://v3.router.vuejs.org/zh/installation.html

代码语言：javascript复制

<template>
    <el-table
      :data="tableData"
      style="width: 100%"
      :row-class-name="tableRowClassName">
      <!-- <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column> -->
      <el-table-column
        prop="id"
        label="ID"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </template>
  
  <style>
    .el-table .warning-row {
      background: oldlace;
    }
  
    .el-table .success-row {
      background: #f0f9eb;
    }
  </style>
  
  <script>
    export default {
      methods: {
        tableRowClassName({row, rowIndex}) {
          if (rowIndex === 1) {
            return 'warning-row';
          } else if (rowIndex === 3) {
            return 'success-row';
          }
          return '';
        }
      },
      created:function(){
      this.$add.get("/test").then((response)=>{
      this.tableData = response.data;
    })
  },
  data() {
    return {
      tableData: []
    }
  },
    }
  </script>

Vue Router安装与使用vue路由wue- router是官方的路由插件,能够轻松的管理SPA项目中组件的切换

Vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。

Vue-router目前有3x的版本和4x的版本,

Vue-router3x只能结合vue2进行使用

安装npm install vue-router@3

Vue-router4x只能结合Vue3进行使用

安装npm install vue-router@4

import VueRouter from 'vue-router' import Vue from 'vue' import helloworld from '@/components/HelloWorld.vue' import data from '@/components/demo.vue'

//VueRouter设置为Vue的插件 Vue.use(VueRouter)

new VueRouter({     //指定对应属性与组件关系     routes: [         { path: '/helloworld', component: helloworld},         { path: '/data', component: data}     ] })

export default router

全局引入

启动

npm run serve

子路由

bn.vue

代码语言：javascript复制

<template>
    <el-row>
  <el-button>默认按钮</el-button>
  <el-button type="primary">主要按钮</el-button>
  <el-button type="success">成功按钮</el-button>
  <el-button type="info">信息按钮</el-button>
  <el-button type="warning">警告按钮</el-button>
  <el-button type="danger">危险按钮</el-button>
</el-row>
</template>

代码语言：javascript复制

import VueRouter from 'vue-router'
import Vue from 'vue'
import helloworld from '../components/HelloWorld.vue'
import data from '../components/demo.vue'
import bn1 from '../components/bn.vue'
import bn2 from '../components/bn.vue'

//VueRouter设置为Vue的插件
Vue.use(VueRouter)

const router = new VueRouter({
    //指定对应属性与组件关系
    routes: [
            { path: '/', redirect : "/data"},//重定向
            { path: '/helloworld', component: helloworld},
            { path: '/data', component: data},

            //通过children属性，嵌套子路由
            { path: '/data', component : data,
            children: [
                    {
                      path: 'bn1',
                      component: bn1
                    },
                  ]
            },
            //子路由，方式二
            { path: '/data/bn2', component: bn2},
    ]
})

export default router

子路由方式一

子路由方式二

我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！

2023腾讯·技术创作特训营第三期

0 人点赞