国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關(guān)鍵字專題1關(guān)鍵字專題50關(guān)鍵字專題500關(guān)鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關(guān)鍵字專題關(guān)鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

vue router的基本使用和配置教程

來源:懂視網(wǎng) 責編:小采 時間:2020-11-27 22:04:28
文檔

vue router的基本使用和配置教程

vue router的基本使用和配置教程: 路由,其實就是指向的意思,當我點擊頁面上的home按鈕時,頁面中就要顯示home的內(nèi)容,如果點擊頁面上的about 按鈕,頁面中就要顯示about 的內(nèi)容。Home按鈕 => home 內(nèi)容, about按鈕 => about 內(nèi)容,也可以說是一種映射. 所以在頁面上有兩個部分,
推薦度:
導讀vue router的基本使用和配置教程: 路由,其實就是指向的意思,當我點擊頁面上的home按鈕時,頁面中就要顯示home的內(nèi)容,如果點擊頁面上的about 按鈕,頁面中就要顯示about 的內(nèi)容。Home按鈕 => home 內(nèi)容, about按鈕 => about 內(nèi)容,也可以說是一種映射. 所以在頁面上有兩個部分,

 路由,其實就是指向的意思,當我點擊頁面上的home按鈕時,頁面中就要顯示home的內(nèi)容,如果點擊頁面上的about 按鈕,頁面中就要顯示about 的內(nèi)容。Home按鈕  => home 內(nèi)容, about按鈕 => about 內(nèi)容,也可以說是一種映射. 所以在頁面上有兩個部分,一個是點擊部分,一個是點擊之后,顯示內(nèi)容的部分。

  點擊之后,怎么做到正確的對應(yīng),比如,我點擊home 按鈕,頁面中怎么就正好能顯示home的內(nèi)容。這就要在js 文件中配置路由。

1.在main.js文件中引入相關(guān)模塊以及組件及實例化vue對象配置選項路由及渲染App組件 默認設(shè)置如下:

 import Vue from 'vue'
 import App from './App'
 import router from './router/index.js' // 引入路由
 Vue.config.productionTip = false 
 /* eslint-disable no-new */
 new Vue({
 el: '#app',
 router, // 在掛載點中注入vue
 components: { App },
 template: '<app/>'
 })

2.自定義配置路由路徑,在src 下 router/index.js 文件中配置路由路徑

import Vue from 'vue'
 import Router from 'vue-router' // 引入vue-router 
 // 引入要跳轉(zhuǎn)的vue組件
 import Manage from '@/page/admin/Manage'
 import userList from '@/page/admin/userList'
 import addUser from '@/page/admin/addUser'
 import shopList from '@/page/admin/shopList'
 import addShop from '@/page/admin/addShop'
 Vue.use(Router) // 在vue中注入Router
 // 配置路由路徑
 const routes =[
 {
 path: '/',
 name: 'Login',
 component: Login // 需要跳轉(zhuǎn)的組件
 },
 {
 path: '/Manage',
 name: 'Manage',
 component: Manage,
 children: [{
 path: '/userList',
 component: userList,
 meta: ['數(shù)據(jù)管理', '用戶列表']
 },
 {
 path: '/shopList',
 component: shopList,
 meta: ['數(shù)據(jù)管理', '商品列表']
 },
 {
 path: '/addUser',
 component: addUser,
 meta: ['添加數(shù)據(jù)', '添加用戶']
 },
 {
 path: '/addShop',
 component: addShop,
 meta: ['添加數(shù)據(jù)', '添加商品']
 }
 ]
 },
 {
 path: '/home',
 name: 'Home',
 component: Home
 },
 {
 path: '/helloworld',
 name: 'Home',
 component: HelloWorld
 }
 ]
 // 將路徑注入到Router中
 var router=new Router({
 'mode': 'history',
 routes
 })
 // 導出路由
 export default router;

3.在頁面中使用路由

在vue-router中, 我們也可以看到它定義了兩個標簽<router-link><router-view><router-link> 就是定義根據(jù)某個路徑跳到某個組件的標簽,<router-view> 就是點擊后,組件顯示內(nèi)容的標簽。所以 <router-link> 還有一個非常重要的屬性 to, 它定義點擊之后,要到哪個路徑下 , 如:<router-link  to="/home">Home</router-link>

總結(jié)

以上所述是小編給大家介紹的vue router的基本使用和配置教程,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!

聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

vue router的基本使用和配置教程

vue router的基本使用和配置教程: 路由,其實就是指向的意思,當我點擊頁面上的home按鈕時,頁面中就要顯示home的內(nèi)容,如果點擊頁面上的about 按鈕,頁面中就要顯示about 的內(nèi)容。Home按鈕 => home 內(nèi)容, about按鈕 => about 內(nèi)容,也可以說是一種映射. 所以在頁面上有兩個部分,
推薦度:
標簽: VUE 使用方法 教程
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板: 一区二区三区中文字幕 | 九九久久99综合一区二区 | 成人免费一级毛片在线播放视频 | 日本孕妇与黑人xxxxxx | 国产高清精品一区 | 国产一级在线 | 国内偷拍第一页 | 亚洲色图第四页 | 国产欧美另类 | 国产精品视频免费视频 | 欧美日韩免费一区二区在线观看 | 最新国产小视频在线播放 | 久热中文字幕在线精品首页 | 全部费免一级毛片不收费 | 欧美在线日韩 | 久久久久久久久久久9精品视频 | 亚洲欧美韩日 | 亚洲欧美国产精品专区久久 | 在线观看免费精品国产 | 亚洲自拍另类 | 91大神在线精品视频一区 | 国产精品不卡视频 | 亚洲欧洲免费 | 国产91精品久久久久久 | 国产欧美视频在线观看 | 精品国产一区二区三区香蕉 | 夜夜骑首页 | 国产精品久久久久aaaa | 精品亚洲一区二区三区 | 亚洲欧洲一区二区 | 亚洲欧美视频一区二区三区 | 在线视频亚洲欧美 | 国产手机在线国内精品 | 日韩伦理网| 国产一区二区三区免费在线观看 | 国产精品路线1路线2路线 | 欧美日韩国产在线人 | 一级免费毛片 | 成人区精品一区二区不卡亚洲 | 国产精品91av | 国产在线视频资源 |