vue重定向和别名--详解案例

项目目录：

touter/index.js

// 0. 使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);

// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
import Layout from '../views/Layout.vue';
import Home from '../views/Home.vue';
import CourseAll from '../views/CourseAll.vue';
import CourseDetail from '../views/CourseDetail.vue';
import NotFound from '../views/NotFound.vue';

// 2. 定义路由
const routes = [
  {
   
    path: '/layout',
    component: Layout,
    children: [
      {
    path: 'home', component: Home },
      {
    path: 'courseall', component: CourseAll },
      {
    path: 'coursedetail/:courseId', component: CourseDetail }
    ]
  },
  {
   
    path: '*',
    component: NotFound
  }
];

// 3. 创建 router 实例，然后传 `routes` 配置
export default new VueRouter({
   
  mode: 'history',
  routes // (缩写) 相当于 routes: routes
});

// 4. 在 main.js 中创建和挂载根实例

CourseAll.vue

<template>
  <div class="page-courseall">
    <div class="page-title">全部课程页</div>
    <div class="course-list">
      <CourseCard v-for="course in courseList" :key="course.id" :course="course" />
    </div>
  </div>
</template>

<script>
import CourseCard from './CourseCard.vue';

export default {
   
  name: "CourseAll",
  components: {
   
    CourseCard
  },
  data: function() {
   
    return {
   
      courseList: [
        {
   
          id: 'f1',
          title: 'Web前端基础',
          author: '帅哥',
          price: 899,
          desc:
            '本课程通过HTML、CSS基础的学习，Web前端基础。'
        },
        {
   
          id: 'f2',
          title: 'Web前端进阶',
          author: '帅哥',
          price: 1099,
          desc:
            '本课程是对基础课程的补充和提升，补充了一些CSS进阶知识，结合丰富的小练习来夯实基础。'
        }
      ]
    };
  }
}
</script>

<style lang="scss" scoped>
.page-courseall {
   
  height: 100<