Hash路由：移步https://www.cnblogs.com/joyho/articles/4430148.html
路由使用例子【笔记有些许凌乱】：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 <script src="../../js/vue.js"></script> 8 <script src="../../js/vue-router.js"></script> 9 </head> 10 <style> 11 .myactive{ 12 color:red; 13 font-size:24px; 14 } 15 </style> 16 <body> 17 <div id="app"> 18 <!-- <a href="#/login">登录</a> --> 19 <!-- 使用hash路由 来实现页面不刷新而页面元素改变，【也就是单页面网页差用方式-hash【#号】】 --> 20 <!-- <a href="#/register">注册</a> 【使用a超链接实现hash路由也是一种方式，但是不推荐，因为vue-router 提供了一个 router-link这样一个标签，去实现hash路由】 --> 21 <router-link to='/login?id=10&name=zs'>登录</router-link> 22 <!-- to 就表示路由路径，不需要带上#号 route-link 默认会被渲染为超链接 可以使用 tag='span/label'改变渲染方式，但是点击事件一定会有，同样可以hash路由 --> 23 <router-link to='/register/621'>注册</router-link> 24 <router-view></router-view> 25 26 27 <!-- 【既然是路由，当然可以进行参数传递 to='/login?id=10&name=zs' 28 组件和vue实例一样都有自己的声明周期钩子函数，也可以进行值引用{{ val }} 29 】 --> 30 31 32 </div> 33 <!-- 注意，组件也可以被$refs引用 --> 34 35 </body> 36 <script> 37 Vue.config.devtools = true; 38 //vue-rourer.js 被引入后，window全局就会多了一个VueRouter这样一个构造函数，可以new 一个路由配置实例 39 let comobj1 = { 40 template:'<h1>登录组件---{{ $route.query.id }} ---{{ $route.query.name}} </h1>', 41 created(){ //传参方式一！！！ 42 console.log(this.$route.query)//vue-router 提供的用于访问url参数 43 } 44 } 45 let comobj2 = { 46 template:'<h1>注册组件 使用params接收占位符方式提供的参数---传入id为:{{$route.params.id }}</h1>', 47 created() { 48 console.log(this.$route) 49 } 50 } 51 let routerobj = new VueRouter({ 52 routes:[ //注意此处为 routes 不是 routers 53 {path:'/',redirect:'/login'},//如果请求的是其他路径，比如请求域名+’/‘这样一个路径，比较好的方式就是如果没登录过就跳转【redirect】到登录界面【与nodejs的redirect本质上不同】 54 {path:'/login',component:comobj1}, 55 {path:'/register/:id/:name',component:comobj2}, 56 57 //《路由传参第二种方式，【/register/:id 后面跟上一个占位符 ：id, 58 //表示到时候你需要在url地址对应位置处给一个id值】【而且此处提供了几个占位符，到时候router-link to=“” 就必须提供几个参数，否则无法匹配成功】，然后可以用 59 // this.$route.params 接收并使用 》 60 61 62 ] //routers 属性，数组，数组元素为对象，每个对象表示一个路由匹配规则【有两个属性，第一个path:匹配路由【url】，第二个component要展示的组件的【模板对象】】 63 //而且展示组件也需要借助 vue-router提供的 router-view这个标签来展示，要展示的组件内容就被被展示到 <router-view></router-view>位置处 64 65 //与routes平级的属性： linkActiveClass 默认值: "router-link-active" 全局配置 <router-link> 默认的激活的 class 可以修改为自己的样式 66 ,linkActiveClass:'myactive' 67 68 69 //想实现动画效果 吧 <router-view></router-view> 包裹在 transition标签中，并且 加上两组【共四个【v-enter、v-leave-to v-enter-active,v-leave-active】 class 样式】即可 70 71 // 72 }) 73 74 let vm = new Vue({ 75 el:'#app', 76 data:{ 77 78 }, 79 methods:{ 80 81 }, 82 83 router:routerobj //将路由实例与vue实例关联起来，注册路由实例 84 }) 85 </script> 86 </html>
点击超链接实现hash路由跳转：Vue并没有屏蔽原生a超链接的写法，但是Vue中不推荐这种写法，Vue 提供了 <router-link></router-link>去实现路由跳转，Vue系统默认会把这个标签渲染为超链接！
用法：
<router-link to='/login?id=10&name=zs'>登录</router-link> <!-- to 就表示路由路径，不需要带上#号 route-link 默认会被渲染为超链接 可以使用 tag='span/label'改变渲染方式，但是点击事件一定会有【如果定义了的话】，同样可以hash路由 -->
<router-link></router-link>,点击这个渲染后的结果，默认时a标签，后vue-router.js,默认会给这个渲染结果加上router-link-active，可以通过复用这两个类实现路由高亮效果。可以修改路由的构造选项来修改
ex: linkActiveClass:'myactive' //路由实例中跟routes平级的属性
Vue路由的使用步骤总结：
- 引入 包，先vue.js，vue-router.js 必须在vue.js后
- 实例化一个vue实例
- 创建组件模板
- 实例化路由实例
- 定义路由规则【匹配到指定hash路由，就展示指定组件，其内部封装有 hashchange事件，hash路由改变就会触发去渲染相应组件】
- 将路由实例挂载到vue实例上
- 展示hash匹配到的组件--- <router-view></router-view>
路由中的参数的两种接收方式：
1.例如有url：http://127.0.0.1:5500/lecturedemo/vue/20201229/vue-router.html#/login?id=10&name=zs，点击就会切换到组件a ，？后面参数 默认会放在该a组件模板实例的 $route的query属性中，可以在组件内部使用 this.$route.query 获取到
2.url:http://127.0.0.1:5500/lecturedemo/vue/20201229/vue-router.html#/login/10/js, router-link to属性值==url【路由规则有定义{path:'/loginr/:id/:name',component:login},
】， 点击就会切换到login组件 这种方式传递的参数，需要用 this.$route.params获取到！！！
上面两种方式传递的参数，接收起来不太方便，vue提供了更简单的传参方式 props:[''],跟父组件向子组件传值不同的是， 出了 props:['params1','params2'],除了在props数组中注册传递的参数，还需要在路由规则中增加 props:true 这一配置，表示开启props传值方式：
用法：
1. <router-link to='/login/10/zs'>登录</router-link>, 路由地址能匹配上路由规则 2.let comobj1 = { //注册id和name到props中后，组件都可直接使用变量去访问而不使用this.$route.query/params去取得参数了 props: ['id', 'name'], template: '<h1>登录组件---{{ id }} a---a{{ name}} --- </h1>', created() { console.log(this.$route.query) //vue-router 提供的用于访问url参数 }, } 3. { 路由中开始props path: '/login/:id/:name', component: comobj1, props: true, },