共计 1070 个字符，预计需要花费 3 分钟才能阅读完成。
<!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 路由拜访到指定的组件，进行页面展现
正文完