引入vue-router.js
vue-router.js要放到vue.js之后
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue-router.js"></script>
简单例子
<div id="app">
<h1>hello,world!</h1>
<p>
<!-- 通过to属性指定链接 -->
<!-- <router-link>会被渲染成<a>标签 -->
<router-link to="/">首页</router-link>
<router-link to="/student">会员管理</router-link>
<router-link to="/teacher">讲师管理</router-link>
</p>
<router-view></router-view>
</div>
<script>
// 1. 定义路由组件
const welcome = {template:`<div>欢迎</div>`}
const teacher = {template:`<div>teacher list</div>`}
const student = {template:`<div>student list</div>`}
// 2. 定义路由,每个路由应该映射一个组件
const routes = [
{path:'/',redirect:'/welcome'},
{path:'/welcome',component:welcome},
{path:'/teacher',component:teacher},
{path:'/student',component:student}
]
// 3. 创建router实例,然后传routes配置
const router = new VueRouter({
routes //缩写,相当于 routes:routes
})
//4. 创建和挂载根实例,从而让整个应用都有路由功能
var vm = new Vue({
el:"#app",
router
});
</script>