<!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> </head> <body> <!-- SPA单页面应用 路由控制了页面应该显示的内容 /a 传参 除了使用动态路由外 还可以使用查询参数query 两者的路由风格不同 动态路由 /type/1 /type/2 /type/3 查询参数 /type?id=1 /type?id=2 /type?id=3 虽然两者表现不同，但是，功能都是相同的 动态路由的参数想要获取使用 $route.params.参数名 查询参数 $route.query.参数名 嵌套路由中的子路由所对应的组件会被渲染到其父路由组件的router-view中，如果没有这个，就不渲染 --> <div id="app"> <router-view></router-view> </div> <script src="./vue.js"></script> <script src="./vue-router.js"></script> <script> // 1 创建路由组件 (就是个组件配置对象) const com = { template: ` <div> 组件a // <router-view></router-view> </div> ` } const channel = { /* 必须掌握 在动态路由组件中，接收到动态路由参数 1 模板中 $route.params.id 2 在组件的相关函数里 this.$route.params.id 当我们把router添加到new Vue后，在vue的每个组件的data中都会有一个$route */ template: ` <div>channel {{$route.params.id}}</div> `, created () { // this.$route.params.id } } // 2 创建路由配置 const routes = [ { path: '/', // component: '组件' component: com }, { path: '/a', // xxx.xxx.com/#/a component: com, // 这个时候才能称com为路由组件 children: [ { path: '', component: } ] }, { path: '/channel/:id', // /channel/值 component: channel } ] // 3 生成路由对象 const router = new VueRouter({ // routes: routes routes }) // 4 将路由对象放在vue实例的配置汇中 const app = new Vue({ el: '#app', router }) </script> </body> </html>