路由使用版本https://router.vuejs.org/installation.html

• npm install vue-router@3

• vue2 vueRouter3 Vuex3

• vue3 vueRouter4 Vuex4

1. 配置路由

//  安装vue-router
import Vue from 'vue'
import vueRouter from 'vue-router'
import layout from '@/views/layout'
import my from '@/views/My'
import find from '@/views/Find';
import friend from '@/views/Friend';

Vue.use(vueRouter);
const router = new vueRouter({
    routes: [
        {
            path: '/',
            component:layout,
            redirect: my,
            children: [
            {path: '/my', name:'MyMusic', component:my},
            {path: '/find',name:'FindMusic', component:find},
            {path: '/friend',name:'FriendMusic', component:friend}],
        }],
    // linkActiveClass: '',//路由及子路由高亮
    // linkExactActiveClass: ''//精准路由高亮

})
export default router

2. 挂载路由

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false
import router from './router/index.js'
new Vue({
    render: h => h(App),
    router
}).$mount('#app')

两种传参方式

• 查询参数传参（比较适合传多个参数）

  • 跳转： to='/path?参数名=值&参数名2=值'

  • 获取：$route.query.参数名

• 动态路由传参（优雅简洁，传单个参数比较方便）

  • 配置动态路由：path:"/path/:参数名"

  • 跳转： to="/path/值"

  • 获取：$route.params.参数名

重定向&404 redirect: 重定向到的路径

import NotFind from '@/views/NotFind'
import Search from '@/views/NotFind'
const router = new vueRouter({
  routes: [
     { path: '/', redirect: '/home'},
     { path: '/search/:words', component: Search}
     { path: '*', component: NotFind }
     ],
    // linkActiveClass: '',//路由及子路由高亮
    // linkExactActiveClass: ''//精准路由高亮

})

路由模式 image.png

路由跳转js & 传参

• 路由跳转

this.$router.push({path:'path/xxxx'})
this.$router.push({name:'路由名称'})

• 路由跳转query传参

this.$router.push('/path?参数1=参数值1&参数2=参数值2'}
this.$router.push({path: '路由路径'， query: { 参数1: '参数值1', 参数2: '参数值2'}}
this.$router.push({name: '路由名'， query: { 参数1: '参数值1', 参数2: '参数值2'}}

• 路由跳转动态路由传参

this.$router.push('/path/参数值'}
this.$router.push({path: 'path/参数值'}
this.$router.push({name: '路由名'， params: { 参数名: '参数值'}}

路由截图 image.png image.png image.png image.png

keep-alive image.png image.png image.png

Vuex image.png

mutation 用来定义commit 的提交方法 来实现内部修改stores 的变量值，无法在外部修改stores 的变量值 image.png

mapMutations 映射方法 image.png

modul 配置一个user 子模块 image.png

创建user子模块 image.png

访问模块属性mapState image.png

getters image.png image.png