本文共 1531 字，大约阅读时间需要 5 分钟。

路由index.js

import Vue from 'vue'import VueRouter from 'vue-router'import Home from '../views/Home.vue'import Me from '../views/me.vue'import About from "../views/About.vue"import Centor from "@/views/Center.vue"import _404 from "../views/404.vue"Vue.use(VueRouter)const routes = [  {
       path: '/',    name: 'Home',    alias:"/index", //别名 访问 /index也是访问 Home组件    component: Home,      },  {
       path:'*', //未找到视图则跳转404     name:'404',    component: _404  },  {
       path:"/s",     redirect:"/me/20" //重定向  },  {
       path: '/about/:userId',    name: 'About',    component: About  },  {
       path:"/me/:id",    component:Me  },  {
       path:"/me",    name:'Me',    component: Me,    children:[ //子路由       {
           path:"center", // /me/:id/center         component:Centor //在对应路径下 显示在 Me组件的routerView中      },    ]      },  {
       path: "/all",    // 命名视图 在router-view name属性中指明名字    components:{
         h:Home,      a:About,      m:Me    }  }]const router = new VueRouter({
     routes,  mode:"history" //去除 路径中的/#/})export default router

App.vue

me.vue

404.vue

其他的页面也类似

转载地址：http://byro.baihongyu.com/