普通文件中：
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<div>
<router-link to="/">首页</router-link>
<router-link to="/about">关于我们</router-link>
<router-link to="/user/黄花花">黄花花</router-link>
<router-link to="/user/李栓蛋">李栓蛋</router-link>
</div>
<div>
<router-view></router-view>
</div>
</div>
<script src="../lib/vue.js"></script>
<script src="../lib/router.js"></script>
<script src="./js/app.js"></script>
</body>
</html>app.js:
var routes = [
{
path: '/',
component: {
template: '<div><h1>首页</h1></div>'
}
},{
path: '/about',
component: {
template: '<div><h2>关于我们</h2></div>'
}
},{
path: '/user/:name',
component: {
template: '<div><h2>我叫：{{$route.params.name}}</h2></div>'
}
}
];
var router = new VueRouter({
routes: routes
});
new Vue({
el: '#app',
router: router
})单文件组件中：
index.js:
import Vue from 'vue'
import Router from 'vue-router'
import Consult from '@/components/Consult'
import Employment from '@/components/Employment'
import Home from '@/components/Home'
import Introduce from '@/components/Introduce'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/home',
name: 'home',
component: Home
},
{
path: '/consult/:name',
name: 'consult',
component: Consult
},
{
path: '/employment',
name: 'employment',
component: Employment
},
{
path: '/introduce',
name: 'introduce',
component: Introduce
}
]
})
Consult.vue:
<template>
<div class="consult">
咨询：{{$route.params.name}}
</div>
</template>
<script>
</script>
<style scoped>
.consult{
font-size:20px;
color:#000;
margin:20px auto;
}
</style>
