vue路由和vuex的使用

vue路由的使用时因为vue可以做成单页面应用。在不同页面之间进行切换时，需要用到路由的概念，一个地址对应一个页面

路由的使用

第一步安装我使用的是vue-cli脚手架工具

vue add router

第二步配置路由

安装完毕以后会有一个路由文件中的index.js文件

import Vue from 'vue'

import VueRouter from 'vue-router'

import Home from '../views/Home.vue'

// import One from '../components/One.vue'

// import Two from '../components/Two.vue'

Vue.use(VueRouter)

const routes = [

{

path: '/',

redirect: 'home'

{

path: '/home/:id',占位传参，router-link的形式是 <router-link to="/home/1">Home</router-link> |

component: Home

{

path: '/about',//占位符的参数必须传

// route level code-splitting

// this generates a separate chunk (about.[hash].js) for this route

// which is lazy-loaded when the route is visited.

component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),

children: [

{

path: '/',

redirect: 'one'

{

path: 'one',

component: () => import(/* webpackChunkName: "about" */ '../components/One.vue'),

{

path: 'two',

component: () => import(/* webpackChunkName: "about" */ '../components/Two.vue'),//按需加载

]

}

]

const router = new VueRouter({

mode: 'history',

base: process.env.BASE_URL,

routes

})

export default router

里面配置路由信息，也就是那个地址对应那个页面

注意

1、路由配置中的path指的是地址，如果是里面有子页面，子页面的地址前面不要在加'/'了。

2、name属性一般是在路由跳转使用

this.$router.push({name:'One',params:{name:this.name,age:18}})push方法时和那个name保持一致，用来找页面用的，如果没有name，会找不到响应的页面。

使用name的时候传参使用的是params.如果跳转使用的是path，传参使用的是query,必须这样对应，否则传参会失败。

query传参的例子

this.$router.push({path:'/home',query:{name:this.name,age:18}})

查询参和占位参

query传递的参数是查询参，可传可不传，不影响地址，页面都会显示出来，顶多是查询的内容为空。

占位参，必须传，否则找不到对应的地址。上面代码中有说明。

路由中有一个导航守卫的用法，一般用来处理权限处理，管理页面跳转比较合适。

守卫分为全局的和单个组件。

下面是一个单个组件路由的处理例子。用来处理路由跳转。注意的是导航守卫后都要执行next()函数。