vue全家桶项目搭建之五——vue 中路由vue-router配置方法以及vue-router路由的跳转方法以及参数的传递和接收

目录

 

一、安装vue-router

二、配置vue-router

1.src文件下新建文件夹router与store平级，并配置路由

2.在main.js中配置

三.vue路由带参数跳转方式以及参数的接收方式

1.通过path属性跳转query属性传值 的this.$router.push

2.通过path属性跳转params属性传值 的this.$router.push

3.通过name属性跳转params属性传值 的this.$router.push

4.通过name属性跳转query属性传值 的this.$router.push

5.字符串

---

一、安装vue-router

npm install vue-router

二、配置vue-router

1.src文件下新建文件夹router与store平级，并配置路由

/*
 * @Author: jona
 * @Date: 2020-05-15 11:30:33
 * @LastEditTime: 2020-05-18 14:34:56
 * @LastEditors: Please set LastEditors
 * @Description: 路由
 * @FilePath: \vuedemo\src\route\index.js
 */
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export const constRouter = [
    {
        path: '/',
        component: () => import('@/views/login') ,
    },
    {
        path: '/test',
        name:'test',
        component: () => import('@/views/test') ,
    },
    {
        path: '/test1',
        name:'test1',
        component:  () => import('@/views/test1') ,
    },
]

export default new Router({
    // mode: 'history', // require service support value is hash or history defalut is hash
    scrollBehavior: () => ({ //设置滚动行为，简单的滚动到顶部，其他用法https://router.vuejs.org/zh/guide/advanced/scroll-behavior.html#%E5%BC%82%E6%AD%A5%E6%BB%9A%E5%8A%A8
        y: 0
    }),
    routes: constRouter
})

ps:scrollBehavior的具体用法和其他用法参照官网：https://router.vuejs.org/zh/guide/advanced/scroll-behavior.html#%E5%BC%82%E6%AD%A5%E6%BB%9A%E5%8A%A8 此处不再赘述

2.在main.js中配置

/*
 * @Author: your name
 * @Date: 2020-05-11 14:31:16
 * @LastEditTime: 2020-05-15 16:48:04
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vuedemo\src\main.js
 */
import Vue from 'vue'
import App from './App.vue'
import ElementUI from "element-ui"
import 'element-ui/lib/theme-chalk/index.css';
import store from './store'
import router from './router'

Vue.use(ElementUI, { size: 'small', zIndex: 3000 });
Vue.config.productionTip = false

new Vue({
  store,
  router,
  render: h => h(App),
}).$mount('#app')

三.vue路由带参数跳转方式以及参数的接收方式

1.通过path属性跳转query属性传值 的this.$router.push

 // path带查询参数（1.query =>/test?name=张三&id=1）
      this.$router.push({
        path: "/test",
        query: {
          name: "张三",
          id: 1
        }
      });

参数接受方式：

this.$route.query

2.通过path属性跳转params属性传值 的this.$router.push

  this.$router.push({
        path: "/test",
        params: {
          name: "张三",
          id: 1
        }
      });

重点：参数将接收不到！// params 失效，当path进行路径跳转的时候params失效，页面正常跳转

3.通过name属性跳转params属性传值 的this.$router.push

路由配置必须带name属性否则无法跳转

{
        path: '/test',
        name:'test',
        component: () => import('@/views/test') ,
    },

 // name 命名路由,路由配置必须带name属性（1.params =>/test）
      //  this.$router.push({
      //   name: "test",
      //   params: {
      //     name: "张三",
      //     id: 1
      //   }
      // });

参数接收：

this.$route.params

4.通过name属性跳转query属性传值 的this.$router.push

  //  name 命名路由,路由配置必须带name属性（1.params =>/test?name=张三&id=1）
       this.$router.push({
        name: "test",
        query: {
          name: "张三",
          id: 1
        }
      });

参数接收：

 this.$route.query

5.字符串

字符串不带参：

 this.$router.push('test');

字符串带参数：

this.$router.push({ path: `/test1/${this.userId}` })  ///test/233

参数接收：

this.$route.params.userId

ps：字符串模式的路由跳转要配合着路由的书写：

  {
        path: '/test1/:userId',
        name:'test1',
        component:  () => import('@/views/test1') ,
    },

至此vue 的基础demo搭建完毕，根据自己的UI往里面加内容即可

gihub地址：

https://github.com/tutuQin/vue-base-demo.git

接下来回从两个方面继续搭建：

1.后台管理系统基础demo搭建

2.普通官网系统基础demo搭建

vue全家桶项目搭建之六——vue后台管理系统基础demo搭建之布局

如果有更精辟的见解欢迎评论留言探讨，一起探讨，一起进步！若回复不及时可联系：