App.vue
<template> <div id="app"> <div id="nav"> <!-- router-link应用于路由导航，相对于a标签，router-link可以在单页面跳转，体验更好 router-link的to参数可以接收字符串(path,不需要:进行属性绑定)，也可以接收一个对象（命名路由，需要:进行属性绑定）， 里面的name参数为要跳转到路由的名字 name方式较path方式好，原因是name不易变，且语义清晰明确 --> <router-link :to="{name:'Home'}">Home</router-link> | <router-link to="/about">About</router-link> </div> <router-view></router-view> <router-view name="aView"></router-view> <router-view name="bView"></router-view> </div> </template> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; } #nav { padding: 30px; } #nav a { font-weight: bold; color: #2c3e50; } #nav a.router-link-exact-active { color: #42b983; } </style>router/index.js
import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' import Test from '../views/Test.vue' import NotFound from '../views/NotFound.vue' import TestChild from '../views/TestChild.vue' import AView from '../views/AView.vue' import BView from '../views/BView.vue' Vue.use(VueRouter) const routes = [ { path: '/', alias:'/home', name:'Home', components:{ default: Home, aView: AView, bView: BView, }, }, { path: '/test/:id', name: 'Test', component: Test, props:true, children:[ { path: ':name', name: 'TestChild', component: TestChild, props:true, meta:{ isRequiresAuth:true, isChecked:false, } }] }, { path: '/about', name: 'About', component: () => import(/* webpackChunkName: "about" */ '../views/About.vue') }, { path: '*', name: 'NotFound', component: NotFound }, ] const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes }) export default router
