<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue路由</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="itany">
<div>
<!--使用router-link组件来定义导航，to属性指定链接url-->
<router-link to="/home">主页</router-link>
<router-link to="/news">新闻</router-link>
</div>
<!--router-view用来显示路由内容-->
<router-view></router-view>
</div>
<script>
// 1.定义组件
var Home = {
template: '<h3>我是主页</h3>'
}
var News = {
template: '<h3>我是新闻</h3>'
}
// 2.配置路由
const routes = [
{ path: '/home', component: Home },
{ path: '/news', component: News },
{ path: '*', redirect: '/home' }//重定向，即默认的情况下打来home组件；
]
// 3.创建路由实例
const router = new VueRouter({
routes,
linkActiveClass: 'active'//更新活动链接的class类名
});
// 4.创建根实例并将路由挂载到vue实例上
new Vue({
el: '#itany',
router//注入路由
})
</script>
</body>
</html>