文档:http://router.vuejs.org/zh-cn/
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="http://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="box">
<p>
<router-link to="/home">home</router-link>
<router-link to="/news">news</router-link>
</p>
<router-view></router-view>
</div>
<script type="text/javascript">
const Home = { template: '<div>首页</div>' }
const News = { template: '<div>新闻</div>' }
const routes = [
{ path: '/home', component: Home },
{ path: '/news', component: News }
]
const router = new VueRouter({
routes
})
const app = new Vue({
router
}).$mount('#box')
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
![这里写图片描述](https://img-blog.csdn.net/20170123171113487?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZ2l0aHViXzI2NjcyNTUz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
路由重定向
上面代码,我们应该设置打开浏览器就默认调整到 “首页”,所以需要把根路由/
重定向到/home
。
修改路由配置:
const routes = [
{ path: '/', redirect: '/home' },
{ path: '/home', component: Home },
{ path: '/news', component: News }
]
{ path: '/', redirect: '/home' },
就是把根路由重定向到home。