Vue學習-VueRouter路由基礎
一、VueRouter
1、說明
用 Vue.js + Vue Router 創(chuàng)建單頁應用,感覺很自然:使用 Vue.js
,我們已經可以通過組合組件來組成應用程序,當你要把 Vue Router
添加進來,我們需要做的是,將組件 (components
) 映射到路由 (routes
),然后告訴 Vue Router 在
哪里渲染它們。路由本質上就是超鏈接。
2、選中路由的渲染:
(1)、router-link-exact-active類
當路由到哪里時,該類名就添加到對應的路由標簽上。
比如:當點擊About時,路由就跳轉到About對應的頁面
(2)、router-link-active類
路由中,子路由的path設置(比如:http://localhost/home)包含了父路由的path設置(比如:http://localhost/),那么點擊子路由的時候,給子路由添加router-link-active
類時,父路由也有router-link-active
類。也就是當點擊(http://localhost/home)路由后,兩個路由都有被選中的效果。
3、基本工作原理
在vue
中的html部分引入router-link(與a原理類似),to屬性就是要跳轉的vue組件,而router-view
就負責展現(xiàn)當前路由所指向的內容,使得單頁面也能達到頁面跳轉的效果!
二、實戰(zhàn)
1、創(chuàng)建一個帶router的vue項目
2、打開項目中的src/router/index.js文件
可以看到項目已經自動生成了兩個路由,一個是主頁home
,一個是about
界面。路徑分別為 '/'
和 '/about'
。
打開根目錄的main.js
,可以看到在main.js引入了路由,所以在所有組件中都可以使用路由了。
3、在瀏覽器中打開項目
可以看到Home
和About
兩個路由導航。
4、新建路由
寫一個類似淘寶的路由導航,包括:主頁、消息、購物車和我的四部分。
新建四個vue文件,對應四個路由。
配置路由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中配置導航欄
<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>
結果:
這樣我們就了解了路由的基本概念及其配置以及它的功能。
到此這篇關于Vue學習-VueRouter路由基礎的文章就介紹到這了,更多相關VueRouter路由基礎內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
Vue.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 構建桌面應用程序的框架,下面這篇文章主要給大家介紹了關于electron-vue中報錯Cannot?use?import?statement?outside?a?module的解決方案,需要的朋友可以參考下2023-02-02Vue3發(fā)送post請求出現(xiàn)400?Bad?Request報錯的解決辦法
這篇文章主要給大家介紹了關于Vue3發(fā)送post請求出現(xiàn)400?Bad?Request報錯的解決辦法,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2023-02-02vue?parseHTML?函數(shù)拿到返回值后的處理源碼解析
這篇文章主要為大家介紹了vue?parseHTML?函數(shù)拿到返回值后的處理源碼解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-07-07