Vue Router

components_Home

<template>
	<div>
		<h2>is Home</h2>
	</div>
</template>

<script>
	export default {
		name: 'Home'
	}
</script>

<style>
</style>

components_User

<template>
	<div>
		<h2>is User</h2>
		<h1>{{userid}}</h1>
	</div>
</template>

<script>
	export default {
		name: 'User',
		computed: {
			userid() {
				return this.$route.params.userid
			}
		}
	}
</script>

<style>
</style>

router_index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

import Home from '../components/Home.vue'
import User from '../components/User.vue'

Vue.use(VueRouter)

const routes = [
	{
		path: '',
		redirect: '/home'
	},
	{
		path: '/home',
		component: Home
	},
	{
		path: '/user/:userid', //动态路由设置形式
		component: User
	}
]

const router = new VueRouter({
	routes,
	mode: 'history'
})

export default router

App.vue

<template>
  <div id="app">
    <router-link to="/home" replace>Home</router-link>
    <router-link :to="'/user/' + userid" replace>User</router-link>
	<router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
	  return {
		  userid: 'lisi'
	  }
  }
}
</script>

<style>
	.router-link-active {
		color: #ff0000;
	}
</style>

main.js

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})