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