vue隱藏路由的實現(xiàn)方法
vue隱藏路由方法
先來看下效果,他在首頁的時候是不顯示路由的,點擊跳轉到其他頁面了才會顯示
打開 index.js,加上 mode : " history "
import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ mode:"history", routes: [ { path: '/', name: '/home', component: ()=>import("@/components/home"), }, ] })
vue路由的基本使用
路由的理解
生活中的路由:
vue-router的理解:
vue 的一個插件庫,專門用來實現(xiàn)SPA應用(single page web application)
對SPA應用的理解:
1.單頁Web應用(single page web application,SPA)
2.整個應用只有一個完整的頁面
3.點擊頁面中的導航鏈接不會刷新頁面,只會做頁面的局部更新
4.數(shù)據(jù)需要通過ajax請求獲取
什么是路由?
1.—個路由就是一組映射關系 (key - value)
2. key 為路徑, value 可能是 function 或 component
路由分類
1.后端路由:
1)理解:value 是 function,用于處理客戶端提交的請求
2)工作過程:服務器接收到一個請求時,根據(jù)請求路徑找到匹配的函數(shù)來處理請求,返回響應數(shù)據(jù)
2.前端路由:
1)理解:value 是 component,用于展示頁面內容
2)工作過程:當瀏覽器的路徑改變時,對應的組件就會顯示
路由的基本使用
我們需要完成一個功能,點擊左側導航切換右側內容,頁面如下:
前提:布局編寫
我們之前在 public 下新建了 css 文件夾,并放入了 bootstrap.css,并在 index.html 中進行了引入:
<link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css" rel="external nofollow" >
在 App.vue 中編寫布局:
<template> <div> <div class="row"> <div class="col-xs-offset-2 col-xs-8"> <div class="page-header"><h2>Vue Router Demo</h2></div> </div> </div> <div class="row"> <div class="col-xs-2 col-xs-offset-2"> <div class="list-group"> <a class="list-group-item active" href="./about.html" rel="external nofollow" rel="external nofollow" >About</a> <a class="list-group-item" href="./home.html" rel="external nofollow" >Home</a> </div> </div> <div class="col-xs-6"> <div class="panel"> <div class="panel-body"><h2>我是About的內容</h2></div> </div> </div> </div> </div> </template>
創(chuàng)建 About.vue 和 Home.vue 組件,兩個文件只有文字不同
<template> <h2>我是About的內容</h2> </template> <script> export default { name: "About" } </script> <style scoped> </style>
1、安裝vue-router
由于我們目前學習的是 vue2 ,所以我們需要指定 vue-router 的 3 版本,不指定會默認安裝 4 版本,而 4 版本只能在 vue3 中使用,所以我們執(zhí)行:
npm i vue-router@3
2、和 components 同級,創(chuàng)建 router 文件夾,其下創(chuàng)建 index.js
//該文件用于創(chuàng)建整個應用的路由器 import VueRouter from "vue-router"; import About from "../components/About"; import Home from "../components/Home"; //創(chuàng)建并暴露一個路由器 export default new VueRouter({ routes:[ { path:'/about', component:About }, { path:'/home', component:Home }, ] })
3、main.js 引入 vue-router,引入路由器
vue-router 是個插件,所以我們在 main.js 中引入并使用,同時引入剛才寫的 index.js,并配置
//引入Vue import Vue from 'vue'; //引入App import App from './App'; //引入vue-router import VueRouter from "vue-router"; //引入路由器 import router from "@/router"; //關閉vue的生產提示 Vue.config.productionTip = false //應用插件 Vue.use(VueRouter) //創(chuàng)建vm new Vue({ el: "#app", render: h => h(App), router:router })
4、修改頁面
App.vue 中 a 標簽改為 <router-link>
,其中active-class
可配置高亮樣式
<!--原始html中我們使用a標簽實現(xiàn)頁面的跳轉--> <!--<a class="list-group-item active" href="./about.html" rel="external nofollow" rel="external nofollow" >About</a> <a class="list-group-item" href=" . / home. html" rel="external nofollow" >Home</a>--> <!--vue中我們使用router-link標簽實現(xiàn)路由的切換--> <router-link class="list-group-item" active-class="active" to="/about">About</router-link> <router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
把要區(qū)分展示的位置改為<router-view>
標簽
<div class="panel-body"> <!--指定組件的呈現(xiàn)位置--> <router-view></router-view> </div>
運行程序:
一些注意點
1、路由組件通常存放在 pages 文件夾,一般組件通常存放在 components文件夾
我們把頭部單獨寫成一個組件,新建 Banner.vue
<template> <div class="col-xs-offset-2 col-xs-8"> <div class="page-header"><h2>Vue Router Demo</h2></div> </div> </template> <script> export default { name: "Banner" } </script>
在App.vue 中引入并使用
<template> <div> <div class="row"> <Banner/> </div> <div class="row"> ...... </div> </div> </template> <script> import Banner from "@/components/Banner"; export default { name: 'App', components: {Banner}, } </script>
我們把 Banner 叫作一般組件,而 About、Home 我們叫作路由組件,一般放在 pages 文件夾里,所以需要修改:
2、通過切換,“隱藏"了的路由組件,默認是被銷毀掉的,需要的時候再去掛載
3、每個組件都有自己的$route
屬性,里面存儲著自己的路由信息
4、整個應用只有一個router
,可以通過組件的 $router
屬性獲取到
嵌套路由
先看效果:
新建 Message.vue 和 News.vue
Message.vue
<template> <div> <ul> <li v-for="m in messageList" :key="m.id"> <a href="/ message1" rel="external nofollow" >{{m.title}}</a> </li> </ul> </div> </template> <script> export default { name: "Message", data(){ return{ messageList:[ {id:"001",title:"消息001"}, {id:"002",title:"消息002"}, {id:"003",title:"消息003"}, ] } } } </script> <style scoped> </style>
News.vue
<template> <ul> <li>news001</li> <li>news002</li> <li>news003</li> </ul> </template> <script> export default { name: "News" } </script>
制定路由規(guī)則,修改 index.js
//該文件用于創(chuàng)建整個應用的路由器 import VueRouter from "vue-router"; import About from "../pages/About"; import Home from "../pages/Home"; import News from "../pages/News"; import Message from "../pages/Message"; //創(chuàng)建并暴露一個路由器 export default new VueRouter({ routes: [ { path: '/about', component: About }, { path: '/home', component: Home, children: [ { path: 'news', component: News }, { path: 'message', component: Message } ] }, ] })
修改 Home.vue
<template> <div> <h2>Home組件內容</h2> <div> <ul class="nav nav-tabs"> <li> <router-link class="list-group-item" active-class="active" to="/home/news">News</router-link> </li> <li> <router-link class="list-group-item" active-class="active" to="/home/message">Message</router-link> </li> </ul> <router-view></router-view> </div> </div> </template> <script> export default { name: "Home" } </script>
有兩點需要注意:
1、index.js 中/about
和 /home
是一級路由,news
和 message
是二級路由,規(guī)則前不需要加斜杠了
2、Home.vue 中的路徑,需要寫完整路徑 /home/news
總結
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
Vue3中Vuex狀態(tài)管理學習實戰(zhàn)示例詳解
這篇文章主要為大家介紹了Vue3中Vuex狀態(tài)管理學習實戰(zhàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-06-06Vue中ElementUI結合transform使用時如何修復el-select彈框定位不準確問題
這篇文章主要介紹了Vue中ElementUI結合transform使用時如何修復el-select彈框定位不準確問題,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01