VueRouter 修改地址栏路径时，切换显示匹配的组件

使用5+2：

1下载版本3.6.5（Vue3对应版本4.X）

npm add vue-router@3.6.5

2引入

import VueRouter from 'vue-router'

3安装注册

Vue.use(VueRouter)

4创建路由对象

const router=new VueRouter()

5将路由对象注入到Vue实例中，建立关联

new Vue({
  render:h=>h(App),
  router
}).$mount('#app')

2个核心步骤：

1创建需要的组件（src下views目录下），配置路由规则 main.js

new VueRouter({routes：[{path:'/xxx',component:xx},{}]})

注：Find.vue报错因为find是一个单词，加name，  export default{name:"FindMusic"}

2配置导航，配置路由出口，路径匹配的组件显示的位置

<router-view></router-view>

组件存放目录问题

页面组件 src/views文件夹

复用组件 src/components文件夹

路由的封装抽离

将main.js中路由模块抽离出来。src/router/index.js    @直接指代src，便于写绝对路径

引入三个子网页、Vue、VueRouter

App.vue  router-link标签取代a标签，to取代href，默认提供高亮类名  本质还是a标签

声明式导航（router-link）-两个类名

router-link-active模糊匹配（用得多）to="/my"可匹配/my、/my/a、/my/b

router-link-exact-active精确匹配  to="/my"仅可匹配/my

VueRouter里面linkActiveClass：'xxx',linkEXactiveActiveClass：'xxx'   直接敲link

声明式导航（router-link）-跳转传参

查询参数传参   to="/path?参数名=值"   

对应页面组件接收传递过来的值{{$route.query.参数名 }}

动态路由传参

1配置动态路由path：'/searsh/:words?'(?为可选符，按需加)

2配置导航链接to="/path/参数值"

3对应页面组件接收传递过来的值{{$route.params.参数名 }}

重定向  匹配某一路径后，强制跳转

new VueRouter({routes：[{path:'/',redirect:'/xxx'},{}]})

404   当路径找不到匹配时,给个提升页面   配在路由最后

new VueRouter({routes：[.......{path:'*',component:NotFind},{}]})

模式设置

hash路由（默认）.../#/...(#很奇怪)  mode:"hash"

history路由（常用）  new VueRouter({routes，mode:"history"})

编程式导航-基本跳转

点击按钮跳转页面：编程式导航：用js代码来进行跳转

1path路径跳转  绑定的事件函数内this.$router.push('path')

2name命名路由跳转(路径较长时用此写法方便)  new VueRouter({routes：[{name:'xxx',path:'/',redirect:'/xxx'},{}]})

绑定的事件函数内this.$router.push({name:'xxx'})

 编程式导航-路由传参 跳转需要传参

1path路径跳转传参

this.$router.push('/path?key=${{this.inpValue}}&......')  双向绑定的数据传入

this.$router.push({
  path:'/path',
  query:{
    key=this.inpValue
  }
}) 

动态路由传参 

this.$router.push('/path/参数名')
this.$router.push({
  path:'/path/参数名'
})

完整写法（更适合传参）

​this.$route.push({
  name:'xxx',
  query:{参数名：'参数值'},
  params:{参数名：'参数值'}
})