西宁seo网站建设建个企业网站多少钱
VueRouter 修改地址栏路径时，切换显示匹配的组件
使用5+2：
1下载版本3.6.5（Vue3对应版本4.X）
npm add vue-router@3.6.52引入
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:{参数名：'参数值'}
})