vue-router的使用

用前记得先安装vue-router，vue2用3，vue3用4

router/index.文件的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
// 引入Vue和vue-router
import Vue from "vue";
import VueRouter from 'vue-router'
// 引入路由组件例子
import Home from '../pages/Home'
import Login from '../pages/Login'
import Register from '../pages/Register'
import Search from '../pages/Search'
// 使用Vue-Router
Vue.use(VueRouter)
// 配置路由
export default new VueRouter({
    //配置路由路径
    routes: [
        {
            path: '/home',
            component: Home,
            meta:{show:true}
        },
        {
            path: '/login',
            component: Login,
            meta:{show:false}  
        },
        {
            // params参数对应的路由信息要修改为path: "/search/:keyword" 这里的/:keyword就是一个params参数的占位符
            path: '/search/:keyword?',
            component: Search,
            meta:{show:true},
            name:'search',
            // 路由组件能不能传递props数据
            // 布尔值写法:只有parmas参数
            // props: true
            // 对象写法
            // props:{a:1,b:2}
            //函数写法: 可以params参数、query参数，通过props传递给路由组件
            props: ($route) => {
                return {keyword:$route.params.keyword,k:$route.query.k}

            }

        },
        {
            path: '/register',
            component: Register,
            meta:{show:false}  
        },
        // 重定向到首页
        {
            path: '/',
            redirect: '/home'
        }
    ]

})

main.js入口配置

1
2
3
4
5
6
7
8
9
引入路由器
import router from './router'
new Vue({
  render: h => h(App),
  // 注册路由器：底下的路由器是KV一直省略V
  //注册路由信息:当这里书写router的时候，组件身上都拥有$route,$router属性
  router
}).$mount('#app')

最后在APP.vue中进行使用

1
2
<!-- 路由组件的出口的地方 -->
<router-view></router-view>

以上基本的配置，下面是一些路由的具体使用

1
在非路由组件中a标签的跳转可以换成router-link标签也是一个a标签但跳转的时候不会引起页面的刷新，

vuex的使用

vue2用3，vue3用4

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 import Vue from "vue"
 import Vuex from "vuex"
// 需要使用插件一次
 Vue.use(Vuex)
// state:仓库存储数据的地方
const state = {

}
// mutations:修改state的唯一手段
const mutations = {

}
//action: 处理action,可以书写自己的业务逻辑,也可以处理异步
const actions = {

}
//getters:理解为计算属性，用于简化仓库数据，让组件获取仓库的数据更加方便
const getters = {

}

// 对外暴露Store类的一个实例
export default new Vue.Store({
    // 进行相应注册
    state,
    mutations,
    actions,
    getters
    
});

main.js入口配置

1
2
3
4
5
6
7
8
9
import store from '/store'
new Vue({
  render: h => h(App),
  // 注册路由器：底下的路由器是KV一直省略V
  router,
  // 注册仓库：组件实例对象会多了一个属性$store属性
  store,
}).$mount('#app')