欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue隱藏路由的實現(xiàn)方法

 更新時間:2022年12月12日 08:35:37   作者:swx980  
這篇文章主要介紹了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>&nbsp;&nbsp;
      </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 是一級路由,newsmessage 是二級路由,規(guī)則前不需要加斜杠了

2、Home.vue 中的路徑,需要寫完整路徑 /home/news

總結

以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關文章

最新評論