<!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>Document</title>
</head>
<body>
<div id="app">
<h1>尺寸.com</h1>
<p>
<!-- 增加超链接 router-link 组件 to属性指定链接-->
<router-link to="/home">HOME</router-link>
<router-link to="/news">NEWS</router-link>
</p>
<!-- 路由的进口，路由匹配到组件之后，要渲染到这里 -->
<router-view></router-view>
</div>
</body>
<script src="../js/vue.min.js"></script>
<script src="../js/axios.min.js"></script>
<script src="../js/vue-router.min.js"></script>
<script>
// 1、定义路由所需的组件
const home = {template:"<div>首页</div>"};
const news = {template:"<div>新闻</div>"};
// 2、定义路由 每个路由有两局部path(门路)，component(组件)
const routes = [
{path:"/home",component:home},
{path:"/news",component:news}
];
// 3、创立路由管理器实例
const router = new VueRouter({
routes:routes
});
// 4、创立vue实例 将router注入到vue实例中，让整个利用都领有路由的性能
var vm = new Vue({
router
}).$mount('#app'); // 代替el
</script>
</html>
总结
- router是vue路由管理器对象，用来治理路由
- route是路由对象，一个路由就对应了一条拜访门路，一组路由用routes
- 每个路由对象，都有两局部：path门路，component组件
- router-link是对a标签的封装，通过to属性指定链接
- router-view 路由拜访到指定的组件，进行页面展现
发表回复