Vue 路由

路由使用版本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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 今日目标 1.能够说出什么是路由2.能够说出前端路由的实现原理3.能够使用Vue-Router实现前端路由4.能够...
    蔚完待旭阅读 642评论 0 0
  • 方式一: 路由路径:/detail/:参数名 this.$router.push({path: '/detail/...
    嘻嘻猪阅读 297评论 0 1
  • 今日目标 1.能够说出什么是路由2.能够说出前端路由的实现原理3.能够使用Vue-Router实现前端路由4.能够...
    懿小诺阅读 817评论 0 0
  • Vue Router 是Vue.js[http://cn.vuejs.org/]官方的路由管理器。它和 Vue.j...
    SY阅读 622评论 0 0
  • 路由是vue进行“页面跳转”的实现方式,而vue-router是vue的一个路由组件。https://router...
    de_self阅读 322评论 0 1