vue路由

developerworks 發(fā)布于2019-08-26 13:50 / 2219人閱讀

摘要：分類子組件中通過獲取參數(shù)傳參路由配置分類父組件中通過路由屬性中的來確定匹配的路由，通過來傳遞參數(shù)。分類子組件中通過獲取參數(shù)區(qū)別是把參數(shù)放在地址欄上，刷新不會(huì)消失，不會(huì)把參數(shù)放在地址上，刷新后消失

vue路由使用

1.安裝vue路由

npm install vue-router

2.在src中新建router/index.js,引入vue路由

import Vue from "vue"
import VueRouter from "vue-router"http://引入vue-router
Vue.use(VueRouter)

3.引入組件，并創(chuàng)建vue路由
*在這里，可以使用@進(jìn)行引入，@相當(dāng)于src目錄

import Home from "../components/Home";
import header from "../components/Header";
import List from "@/components/List";//@相當(dāng)于src目錄
import footer from "../components/footer";
const routes=[
    {path:"/",component:Home},//默認(rèn)頁
    {path:"/header",component:header},
    {path:"/List",component:List},
    {path:"/footer",component:footer},
]
export default new VueRouter({
    routes: routes,
    mode:"history" //去掉地址欄的#號(hào)
  })

4.在main.js中引入router/index.js

import router from "@/router/index";

new Vue({
  el: "#app",
  router:router,
  components: { App },
  template: ""
})

5.路由跳轉(zhuǎn)

首頁

方法跳轉(zhuǎn),在methods中定義一個(gè)方法，通過事件執(zhí)行

routerpush(){
            this.$router.push({ path: "/List" })//路由跳轉(zhuǎn)
            // this.$router.go(1);//在 history 記錄中向前或者后退多少步
            // this.$router.replace({ path: "/List" })//路由跳轉(zhuǎn),但不會(huì)向history中添加記錄
        }

路由傳參

1.params傳參
路由配置

{path:"/List",
name:"分類",
components:List
},

父組件中：通過路由屬性中的name來確定匹配的路由，通過params來傳遞參數(shù)。

this.$router.push({ name:"分類",params:{id:33} })

子組件中通過this.$route.params.id獲取參數(shù)
2.query傳參
路由配置

{path:"/List",
name:"分類",
components:List
},

父組件中：通過路由屬性中的name來確定匹配的路由，通過query來傳遞參數(shù)。

this.$router.push({ name:"分類",query:{id:33} })

子組件中通過this.$route.query.id獲取參數(shù)

*區(qū)別：query是把參數(shù)放在地址欄上，刷新不會(huì)消失，params不會(huì)把參數(shù)放在地址上，刷新后消失

GPU云服務(wù)器云服務(wù)器 Vue_Vue Vue vue3 學(xué)習(xí)筆記 (五)——vue3 _vue

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/109629.html

相關(guān)文章

【Vue.js 牛刀小試】：第十二章 - 使用 Vue Router 實(shí)現(xiàn) Vue 中的前端路由控制

摘要：而路由則是使用了中新增的事件和事件?？偨Y(jié)這一章主要是介紹了如何使用在中構(gòu)建我們的前端路由。系列目錄地址一、基礎(chǔ)知識(shí)概覽第一章 - 一些基礎(chǔ)概念（posted at 2018-10-31）第二章 - 常見的指令的使用（posted at 2018-11-01）第三章 - 事件修飾符的使用（posted at 2018-11-02）第四章 - 頁面元素樣式的設(shè)定（posted a...

cpupro 2019-05-22 19:26 評(píng)論0 收藏0
服務(wù)端預(yù)渲染之Nuxt(路由篇)

摘要：前面既然說到了會(huì)把文件夾下面的所有文件編譯成路由，那么子路由需要使用文件夾嵌套才行?？蛻舳耸状卧L問的頁面會(huì)在服務(wù)端做輸出，一旦渲染完成之后，則不會(huì)再在服務(wù)端輸出，則會(huì)一直在客戶端進(jìn)行輸出了。服務(wù)端預(yù)渲染之Nuxt - 使用現(xiàn)在大多數(shù)開發(fā)都是基于Vue或者React開發(fā)的，能夠達(dá)到快速開發(fā)的效果，也有一些不足的地方,Nuxt能夠在服務(wù)端做出渲染，然后讓搜索引擎在爬取數(shù)據(jù)的時(shí)候能夠讀到...

yuanxin 2019-08-23 16:48 評(píng)論0 收藏0
從頭開始學(xué)習(xí)vue-router

摘要：路由模塊的本質(zhì)就是建立起和頁面之間的映射關(guān)系。這時(shí)候我們可以直接利用傳值了使用來匹配路由，然后通過來傳遞參數(shù)跳轉(zhuǎn)對(duì)應(yīng)路由配置于是我們可以獲取參數(shù)六配置子路由二級(jí)路由實(shí)際生活中的應(yīng)用界面，通常由多層嵌套的組件組合而成。一、前言要學(xué)習(xí)vue-router就要先知道這里的路由是什么？為什么我們不能像原來一樣直接用標(biāo)簽編寫鏈接哪？vue-router如何使用？常見路由操作有哪些？等等這些問...

tommego 2019-08-23 12:55 評(píng)論0 收藏0
從頭開始學(xué)習(xí)vue-router

摘要：路由模塊的本質(zhì)就是建立起和頁面之間的映射關(guān)系。這時(shí)候我們可以直接利用傳值了使用來匹配路由，然后通過來傳遞參數(shù)跳轉(zhuǎn)對(duì)應(yīng)路由配置于是我們可以獲取參數(shù)六配置子路由二級(jí)路由實(shí)際生活中的應(yīng)用界面，通常由多層嵌套的組件組合而成。一、前言要學(xué)習(xí)vue-router就要先知道這里的路由是什么？為什么我們不能像原來一樣直接用標(biāo)簽編寫鏈接哪？vue-router如何使用？常見路由操作有哪些？等等這些問...

jhhfft 2019-08-02 11:56 評(píng)論0 收藏0
從頭開始學(xué)習(xí)vue-router

摘要：路由模塊的本質(zhì)就是建立起和頁面之間的映射關(guān)系。這時(shí)候我們可以直接利用傳值了使用來匹配路由，然后通過來傳遞參數(shù)跳轉(zhuǎn)對(duì)應(yīng)路由配置于是我們可以獲取參數(shù)六配置子路由二級(jí)路由實(shí)際生活中的應(yīng)用界面，通常由多層嵌套的組件組合而成。一、前言要學(xué)習(xí)vue-router就要先知道這里的路由是什么？為什么我們不能像原來一樣直接用標(biāo)簽編寫鏈接哪？vue-router如何使用？常見路由操作有哪些？等等這些問...

frontoldman 2019-08-29 17:11 評(píng)論0 收藏0
使用 webpack 插件自動(dòng)生成 vue 路由文件

摘要：從長遠(yuǎn)來看，使用插件自動(dòng)生成路由是具有一定好處的?，F(xiàn)在使用插件來自動(dòng)生成路由后，就無需再關(guān)心和維護(hù)這些路由文件了。一款自動(dòng)生成 vue 路由文件的 webpack 插件 vue-route-webpack-plugin 在項(xiàng)目中試點(diǎn)成功了，現(xiàn)在在項(xiàng)目中已經(jīng)不需要再維護(hù)路由配置文件了，由插件自動(dòng)生成，節(jié)省了大家維護(hù)路由的時(shí)間。從長遠(yuǎn)來看，使用插件自動(dòng)生成路由是具有一定好處的。當(dāng)項(xiàng)目中...

kviccn 2019-08-26 14:04 評(píng)論0 收藏0