vuex基本使用

vue2 对应的 vuex、vue-router 都为3.

项目创建与框架安装如下

vue create hellorouter3

npm install vue-router@3

npm i vuex@3

npm install

npm run serve

处理新建About组件报错

根路径下创建.eslintrc.js文件，其内容如下：

module.exports = {'parser': '@babel/eslint-parser',  //支持ES6语法rules: {"*": "off"},
};

/vue.config.js 添加 lintOnSave:false

const {defineConfig} = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,lintOnSave: false,
})

vue-router基本使用

1. 新建About组件其路径为：src/pages/About.vue

<template><div></div>
</template><script>
export default {name: "About"
}
</script><style scoped></style>

2. 将HelloWorld.vue 移动到 src/pages 路径下

3. 注册vuerouter框架并进行路由的集中配置管理

   新建 src/router/index.js ，其内容如下：

import Vue from 'vue'
import VueRouter from "vue-router"
import HelloWorld from "@/pages/HelloWorld";
import About from "@/pages/About";Vue.use(VueRouter)
const routes = [{path: "/",component: HelloWorld},{path: '/about',component: About}
]
const router = new VueRouter({routes,mode: 'hash'
})
export default router;

4. 修改main.js 注册路由，将路由与当前vue实例进行绑定

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

5. App.vue 添加路由跳转连接和组件容器

<template><div id="app"><router-link to="/">Home</router-link>|<router-link to="/about">About</router-link><router-view/></div>
</template>

动态路由

更近一步，可以进行路由传参

params传递数据

1. 修改router/index.js文件， About组件声明通过路径id进行动态传递数据; About组件通过props参数接收数据。

import Vue from 'vue'
import VueRouter from "vue-router"
import HelloWorld from "@/pages/HelloWorld";
import About from "@/pages/About";Vue.use(VueRouter)
const routes = [{path: "/",component: HelloWorld},{path: '/about/:id', //声明允许通过路径拼接的方式，传递id eg. to="/about/123"component: About,props: true,  //允许About组件通过声明props的方式接收数据,否则需要使用this.$route.params.id进行id属性的接收name: 'about'}
]
const router = new VueRouter({routes,mode: 'hash',base: '/'// 当你将应用部署到一个子目录时，需要设置 base 参数以确保路由链接和资源路径正确解析。
})
export default router;

2. 调整About组件，接收并展示id

<template><div>{{ id }}</div>
</template><script>
export default {name: "About",props: ['id'],
}
</script><style scoped></style>

3. 调整调用处App.vue 传递id

<template><div id="app"><router-link to="/">Home</router-link>|<router-link :to="{name: 'about', params: {id: 456}}">About</router-link>|<router-link to="/about/123">About</router-link><!--    <HelloWorld msg="Welcome to Your Vue.js App"/>--><router-view/></div>
</template>

编程传递数据

通过js代码，进行动态数据传递

1. 调整App.vue 调用this.$router.push进行页面跳转

<template><div id="app"><router-link to="/">Home</router-link>|<router-link :to="{name: 'about', params: {id: 456,name:'gggg'}}">About</router-link>||<button @click="showAbout2">About</button><router-view/></div>
</template><script>
// import HelloWorld from './components/HelloWorld.vue'export default {name: 'App',components: {// HelloWorld},methods: {showAbout2() {this.$router.push({name: 'about2', query: {id: 122222, name: 'goood'}})}}
}
</script>

2. 修改router/index.js， 定义About2组件路由配置

import Vue from 'vue'
import VueRouter from "vue-router"
import HelloWorld from "@/pages/HelloWorld";
import About from "@/pages/About";
import About2 from "@/pages/About2";Vue.use(VueRouter)
const routes = [{path: "/",component: HelloWorld},{path: '/about',component: About,// props: true,name: 'about'},{path: '/about2',component: About2,// props: true,name: 'about2'}
]
const router = new VueRouter({routes,mode: 'hash',base: '/'// 当你将应用部署到一个子目录时，需要设置 base 参数以确保路由链接和资源路径正确解析。
})
export default router;

3. 通过this.$route接收参数

<template><div>{{ id }} --- {{ name }}</div>
</template><script>
export default {name: "About2",data() {return {id: this.$route.query.id,name: this.$route.query.name}}
}
</script><style scoped></style>

路由拦截

全局范围添加路由拦截

1. router/index.js 添加路由拦截

router.beforeEach((to, from, next) => {console.error('to:' + to.fullPath)  //"fullPath":"/"console.error('from:' + from.fullPath) //"fullPath":"/"if (to.meta.requireAuth) {//模拟权限验证（需要手动向浏览器localstorage添加数据）if (localStorage.getItem('token')) {next()} else {next({path: '/'})}} else {next()}
})

2. 路由配置添加需要验证flag(meta.requireAuth)

    {path: '/about',component: About,// props: true,name: 'about',meta: {requireAuth: true  //}},

组件范围内添加

<template><div>{{ id }} --- {{ name }}</div>
</template><script>
export default {name: "About",// props: ['id', 'name'],data() {return {id: this.$route.params.id,name: this.$route.params.name}},beforeRouteEnter(to, from, next) {// 在进入路由之前调用// console.log('Before Route Enter', to, from);if (localStorage.getItem('token')) {next();} else {next('/')}},watch: {}
}
</script><style scoped></style>

嵌套路由.

这个东西多用于再次分类的页面

参考地址

其实现方式与一级路由基本一致

1. 定义简单组件

<template><div>{{ id }}</div>
</template><script>
export default {name: "AboutId",props: ['id'],
}
</script><style scoped></style>

同理创建AboutName组件
2. router/index.js 进行组件注册，这里要放入children下

    {path: '/about',component: About,// props: true,name: 'about',children: [{path: '/id',component: AboutId,name: 'aboutId',props: true,},{path: '/name',component: AboutName,name: 'aboutName',props: true,}]},

3. About组件内部放入路由容器和路由跳转关系

<template><div><button @click="toID">toID</button>|<button @click="toName">toName</button><router-view/></div></template><script>
export default {name: "About",// props: ['id', 'name'],data() {return {id: this.$route.params.id,name: this.$route.params.name}},methods: {toID() {this.$router.push({name: 'aboutId', params: {id: 333333}})},toName() {this.$router.push({name: 'aboutName', params: {name: 'good'}})}},watch: {}
}
</script><style scoped></style>