app.vue
<template> <div id="app"> <router-link to="/home">首页</router-link> <router-link to="/about">关于</router-link> <router-link v-bind:to="'/user/'+userId">用户</router-link> <router-view></router-view> </div> </template> <script> export default { name: 'App', data(){ return{ userId:'userId' } }, methods:{ } } </script> <style> </style>about.vue
<template> <div> <h2> 我是about </h2> <p>我是首页内容</p> </div> </template> <script> export default{ name:"Home" } </script> <style scoped> </style>User.vue
<template> <div> <h2> 我是user </h2> <p>我是首页内容</p> <h2>{{userId}}</h2> </div> </template> <script> export default{ name:"User", computed:{ userId(){ return this.$route.params.userId.abc } } } </script> <style scoped> </style>index.js
import VueRouter from 'vue-router' import Vue from 'vue' import Home from '../components/Home' import About from '../components/About' import User from '../components/User' Vue.use(VueRouter) const routes = [{ path: '/', redirect: '/home' }, { path: '/home', component: Home }, { path: '/about', component: About }, { path: '/user/:userId', component: User }, ] //安装插件 const router = new VueRouter({ //配置之间的关系 routes, mode: 'history', linkActiveClass: 'active' }) export default router运行结果
