<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../vue2.2.js"></script>
<script src="../vue-router2.1.js"></script>
</head>
<body>
<div id="app">
<p>
<!--通过to属性指定链接-->
<!--<router-link>默认会被渲染成一个<a>标签-->
<router-link to="/home" tag="li">Home</router-link>
<router-link to="/about">About</router-link>
<hr/>
<!--<router-link :to="{path:'home'}">Home</router-link>
<router-link :to="'about'" tag="li">About</router-link>-->
</p>
<!--路由出口，将路由匹配的组件渲染到这里-->
<!--将自动设置class属性值 .router-link-active-->
<router-view></router-view>
</div>
<script>
//1.定义组件
const Home = {
template:"<div><h1>Home</h1><p>Hello,vue router!</p></div>"
}
const About = {
template:"<div><h1>About</h1><p>这是关于vue-router</p></div>"
}
//2.定义路由 (每个路由应该映射一个组件)
const routes = [{
path:"/home",
component:Home
},{
path:"/about",
component:About
},{
path:"/",
redirect:"/home"
/*component:Home*/
},{
path:"*",
redirect:"/home"//重定向
}
]
//3.创建router实例 ，然后传‘routes’ 配置
const router = new VueRouter({
linkActiveClass:'active',
/*mode:"history",*/
routes // 相当于 routes:routes
})
//4.创建和挂载根实例，从而让整个应用都有路由功能
const vm = new Vue({
router //相当于 router:router
}).$mount("#app")
</script>
</body>
</html>