Vue學(xué)習(xí)-VueRouter路由基礎(chǔ)
一、VueRouter
1、說明
用 Vue.js + Vue Router 創(chuàng)建單頁應(yīng)用,感覺很自然:使用 Vue.js
,我們已經(jīng)可以通過組合組件來組成應(yīng)用程序,當(dāng)你要把 Vue Router
添加進來,我們需要做的是,將組件 (components
) 映射到路由 (routes
),然后告訴 Vue Router 在
哪里渲染它們。路由本質(zhì)上就是超鏈接。
2、選中路由的渲染:
(1)、router-link-exact-active類
當(dāng)路由到哪里時,該類名就添加到對應(yīng)的路由標(biāo)簽上。
比如:當(dāng)點擊About時,路由就跳轉(zhuǎn)到About對應(yīng)的頁面
(2)、router-link-active類
路由中,子路由的path設(shè)置(比如:http://localhost/home)包含了父路由的path設(shè)置(比如:http://localhost/),那么點擊子路由的時候,給子路由添加router-link-active
類時,父路由也有router-link-active
類。也就是當(dāng)點擊(http://localhost/home)路由后,兩個路由都有被選中的效果。
3、基本工作原理
在vue
中的html部分引入router-link(與a原理類似),to屬性就是要跳轉(zhuǎn)的vue組件,而router-view
就負責(zé)展現(xiàn)當(dāng)前路由所指向的內(nèi)容,使得單頁面也能達到頁面跳轉(zhuǎn)的效果!
二、實戰(zhàn)
1、創(chuàng)建一個帶router的vue項目
2、打開項目中的src/router/index.js文件
可以看到項目已經(jīng)自動生成了兩個路由,一個是主頁home
,一個是about
界面。路徑分別為 '/'
和 '/about'
。
打開根目錄的main.js
,可以看到在main.js引入了路由,所以在所有組件中都可以使用路由了。
3、在瀏覽器中打開項目
可以看到Home
和About
兩個路由導(dǎo)航。
4、新建路由
寫一個類似淘寶的路由導(dǎo)航,包括:主頁、消息、購物車和我的四部分。
新建四個vue文件,對應(yīng)四個路由。
配置路由index.js文件
import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' Vue.use(VueRouter) const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/message', name: 'Message', component: () => import(/* webpackChunkName: "about" */ '../views/Message.vue') }, { path: '/goodcar', name: 'GoodCar', component: () => import(/* webpackChunkName: "about" */ '../views/GoodCar.vue') }, { path: '/me', name: 'Me', component: () => import(/* webpackChunkName: "about" */ '../views/Me.vue') } ] const router = new VueRouter({ routes }) export default router
在App.vue中配置導(dǎo)航欄
<template> <div id="app"> <div id="nav"> <router-link to="/">主頁</router-link> <router-link to="/message">消息</router-link> <router-link to="/goodcar">購物車</router-link> <router-link to="/me">我的</router-link> </div> <router-view/> </div> </template> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; } #nav { padding: 30px; margin: 0 auto; width: 30%; display: flex; justify-content: space-around; } #nav a { font-weight: bold; color: #2c3e50; text-decoration: none; } #nav a.router-link-exact-active { color: #42b983; } </style>
結(jié)果:
這樣我們就了解了路由的基本概念及其配置以及它的功能。
到此這篇關(guān)于Vue學(xué)習(xí)-VueRouter路由基礎(chǔ)的文章就介紹到這了,更多相關(guān)VueRouter路由基礎(chǔ)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue-router跳轉(zhuǎn)時打開新頁面的兩種方法
這篇文章主要給大家介紹了關(guān)于vue-router跳轉(zhuǎn)時打開新頁面的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家學(xué)習(xí)或者使用vue-router具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07vue實現(xiàn)GitHub的第三方授權(quán)方法示例
本文主要介紹了vue實現(xiàn)GitHub的第三方授權(quán),文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-11-11復(fù)刻畫龍產(chǎn)品vue實現(xiàn)新春氣泡兔
這篇文章主要為大家介紹了復(fù)刻畫龍產(chǎn)品之使用vue實現(xiàn)新春氣泡兔示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-01-01Vue.js 2.0和Cordova開發(fā)webApp環(huán)境搭建方法
下面小編就為大家分享一篇Vue.js 2.0和Cordova開發(fā)webApp環(huán)境搭建方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02electron-vue中報錯Cannot?use?import?statement?outside?a?m
Electron 是一個使用 JavaScript、HTML 和 CSS 構(gòu)建桌面應(yīng)用程序的框架,下面這篇文章主要給大家介紹了關(guān)于electron-vue中報錯Cannot?use?import?statement?outside?a?module的解決方案,需要的朋友可以參考下2023-02-02Vue3發(fā)送post請求出現(xiàn)400?Bad?Request報錯的解決辦法
這篇文章主要給大家介紹了關(guān)于Vue3發(fā)送post請求出現(xiàn)400?Bad?Request報錯的解決辦法,文中通過實例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-02-02vue?parseHTML?函數(shù)拿到返回值后的處理源碼解析
這篇文章主要為大家介紹了vue?parseHTML?函數(shù)拿到返回值后的處理源碼解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-07-07