<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script> <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script> </head> <body> <div id="app"> <router-link to="/goodslist">商品列表</router-link> <router-link to="/newslist">新闻列表</router-link><br/> <!-- 路由出口 --> <!-- 路由匹配到的组件将渲染在这里 --> <router-view></router-view> </div> </body> <script> //1.定义好组件 const newsListComponent = Vue.extend({ template:'<ul><li>美、英、法联合侵略叙利亚</li><li><router-link to="/newsdetail/10001">乘客用钢笔把飞机逼停了</router-link></li><li><router-link to="/newsdetail/10006">韩国戴眼镜女主播</router-link></li></ul>' }) const goodsListComponent = { template:'<ul><li>卫龙辣条</li><li>麻辣小龙虾</li><li>长沙臭豆腐</li></ul>' } //新闻详情组件 //拿到路径中的参数，可以参考https://router.vuejs.org/zh-cn/essentials/dynamic-matching.html const newsDetailComponent = { template:'<div>我是新闻详情 传递过来的id是 {{$route.params.newsId}}</div>' } //2.创建路由对象，设置路由规则 const router = new VueRouter({ routes:[//其中routes很容易写错，建议拷贝 { path: '/', redirect: '/goodslist' }, {path:'/goodslist',component:goodsListComponent}, {path:'/newslist',component:newsListComponent}, {path:'/newsdetail/:newsId',component:newsDetailComponent} ] }) //3. 注入到根实例,从而让整个应用都有路由功能 const vm = new Vue({ router }).$mount('#app') </script> </html>
很好理解吧