<!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 路由拜访到指定的组件，进行页面展现