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搭建之佈局

如果有更精闢的見解歡迎評論留言探討，一起探討，一起進步！若回覆不及時可聯繫：