react router @4 和 vue路由詳解(一)vue路由基礎和使用

時間 2019-11-20

標籤 react router vue 路由詳解基礎使用欄目 React 简体版

原文原文鏈接

完整版：http://www.javashuo.com/article/p-rfhkumuv-be.htmljavascript

一、vue路由基礎和使用html

　　a、大概目錄vue

我這裏建了一個router文件夾，文件夾下有index.htmljava

　　b、準備工做：vue-router

　　　　npm install vue-routernpm

　　　　或者 yarn add vue-routerapp

　　c、配置this

　　　　必需要經過 Vue.use() 明確地安裝路由功能：
　　　　在你的文件夾下的 src 文件夾下的 main.js 文件內寫入如下代碼spa

import Vue from 'vue'

import VueRouter from 'vue-router'

Vue.use(VueRouter)

　　　　附上個人代碼：我是將router的內容寫在了個人router文件夾下的index.html中，而後暴露出去，在main.js中引入3d

　　　　router文件夾下的index.html

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

import Home from 'pages/Home'
import Map from 'components/Map'
import Home1 from 'components/Home1'
import Find from 'components/Find'
import Mine from 'components/Mine'
import Type from 'components/Type'
import Publish from 'components/Publish'
import Search from 'components/Search'
import Success from 'components/Success'
import Need from 'components/Need'
import Position0 from 'components/Position'
import Like from 'components/scrollX/Like'
import S1 from 'components/scrollX/1'
import S2 from 'components/scrollX/2'
import Listall from 'components/mine/Listall'
import Listone from 'components/mine/Listone'
import Listchange from 'components/mine/Listchange'

const routes = [
    {
        path:'/',
        redirect:'/ho'
    },
    {
        path: '/ho',
        redirect:'/ho/home',
        component: Home,
        children: [
            {
                name: 'home',
                path: 'home',
                component: Home1,
                redirect:'/ho/home/like',
                children :[
                    {
                        name: 'like',
                        path: 'like',
                        component: Like
                    },
                    {
                        name: '2000001',
                        path: '2000001',
                        component: S1
                    },
                    {
                        name: '2000022',
                        path: '2000022',
                        component: S2
                    }
                ]
            },
            {
                name: 'type',
                path: 'type',
                component: Type
            },
            {
                name: 'need',
                path: 'need',
                component: Need
            },
            {
                name: 'find',
                path: 'find',
                component: Find
            },
            {
                name: 'mine',
                path: 'mine',
                component: Mine
            }
        ]
    },
    {
        name: 'search',
        path: '/search',
        component: Search
    },
    {
        name: 'position',
        path: '/position',
        component: Position0
    },
    {
        name: 'publish',
        path: '/publish',
        component: Publish
    },
    {
        name: 'success',
        path: '/success',
        component: Success
    },
    {
        name: 'listall',
        path: '/listall',
        component: Listall
    },
    {
        name: 'listone',
        path: '/listone',
        component: Listone
    },
    {
        name: 'listchange',
        path: '/listchange',
        component: Listchange
    },
    {
        name: 'map',
        path: '/map',
        component: Map
    }
]

const router = new VueRouter({
    mode: 'history',
    routes
})

export default router

　　　　main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.use(MintUI)
Vue.use(ElementUI);

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

　　d、常規使用

　　　　 <router-view></router-view>路由匹配到的組件將渲染在這裏

　　　　你能夠把他理解爲一個版塊，好比如今有一個home頁面，分爲兩部分，內容部分和ibar部分，如圖：

　　　　這五個頁面共用下面的導航欄，只有導航欄上面的內容不一樣

　　　　<router-view></router-view>就能夠寫在<Ibar></Ibar>的上面

<template>
    <div class="home">
        <router-view></router-view>
        <Ibar></Ibar>
    </div>
</template>

　　　　那麼在Ibar頁面中如何切換路由呢？

<template>
    <div class="ibar">
        <router-link to="/ho/home" tag="span" active-class="active">首頁</router-link>
        <router-link to="/ho/type" tag="span" active-class="active">類別</router-link>
        <router-link to="/ho/need" tag="span" active-class="active">需求</router-link>
        <router-link to="/ho/find" tag="span" active-class="active">發現</router-link>
        <router-link to="/ho/mine" tag="span" active-class="active">個人</router-link>
    </div>
</template>

　　　　注意：此處的tag=「span」表明這個按鈕是個span標籤，你能夠寫樣式的時候直接寫span標籤的樣式便可

　　　　　　　此處的active-class="active"表明點擊哪一個按鈕哪一個按鈕高亮

　　　　此時咱們詳細看一下router文件夾下的index.js

//引入vue   

import Vue from 'vue'

//引入路由

import VueRouter from 'vue-router'

//把路由掛載到vue上

Vue.use(VueRouter)

//引入我各個路由對應的component組件

import Home from 'pages/Home'
import Map from 'components/Map'
import Home1 from 'components/Home1'
import Find from 'components/Find'
import Mine from 'components/Mine'
import Type from 'components/Type'
import Publish from 'components/Publish'
import Search from 'components/Search'
import Success from 'components/Success'
import Need from 'components/Need'
import Position0 from 'components/Position'
import Like from 'components/scrollX/Like'
import S1 from 'components/scrollX/1'
import S2 from 'components/scrollX/2'
import Listall from 'components/mine/Listall'
import Listone from 'components/mine/Listone'
import Listchange from 'components/mine/Listchange'

const routes = [
    {

　　　　 //path是路由的路徑

        path:'/',

　　　　 //redirect表明重定向，由於當前路徑'/'並無對應的組件，因此須要重定向到其餘路由頁面
　　　　
        redirect:'/ho'
    },
    {
        path: '/ho',
        redirect:'/ho/home',

　　　　 //當不須要重定向的時候，須要component寫上當前路由對應的組件頁面

        component: Home,

　　　　 //有些路由還有子路由，須要用到children[],
　　　　 //當訪問的時候，<router-link>的屬性to的時候要把全部的父組件都帶上
　　　　 //如:此處的/ho/home/like

        children: [
            {
                name: 'home',
                path: 'home',
                component: Home1,
                redirect:'/ho/home/like',
                children :[
                    {
                        name: 'like',
                        path: 'like',
                        component: Like
                    },
                    {
                        name: '2000001',
                        path: '2000001',
                        component: S1
                    },
                    {
                        name: '2000022',
                        path: '2000022',
                        component: S2
                    }
                ]
            },
            {
                name: 'type',
                path: 'type',
                component: Type
            },
            {
                name: 'need',
                path: 'need',
                component: Need
            },
            {
                name: 'find',
                path: 'find',
                component: Find
            },
            {
                name: 'mine',
                path: 'mine',
                component: Mine
            }
        ]
    },
    {
        name: 'search',
        path: '/search',
        component: Search
    },
    {
        name: 'position',
        path: '/position',
        component: Position0
    },
    {
        name: 'publish',
        path: '/publish',
        component: Publish
    },
    {
        name: 'success',
        path: '/success',
        component: Success
    },
    {
        name: 'listall',
        path: '/listall',
        component: Listall
    },
    {
        name: 'listone',
        path: '/listone',
        component: Listone
    },
    {
        name: 'listchange',
        path: '/listchange',
        component: Listchange
    },
    {
        name: 'map',
        path: '/map',
        component: Map
    }
]

const router = new VueRouter({

    //此處設置mode爲history，即不帶#號，在處理數據的時候會更方便一些

    mode: 'history',

    //ES6的寫法，即routes：routes的簡寫，當key和value名字同樣時，可簡寫

    routes
})

//把你建立的路由暴露出去，使得main.js能夠將其引入並使用

export default router

　　　　引伸1：

　　　　路由有一個meta屬性

　　　　能夠給該路由掛載一些信息

　　　　設置一些本身title、顯示隱藏、左右滑動的方向之類的

meta: {
      title: "HelloWorld",    要現實的title
      show: true               設置導航隱藏顯示
}

　　　　使用的時候：this.$route.meta.show

　　　　<Bottom v-show="this.$route.meta.show"></Bottom>

　　　　引伸2:

　　　　動態路由

{
    path:"/two/:id",
    component:Two,
}

　　　　獲取數據this.$route.params.動態路由的名字

　　　　此處是:this.$route.params.id

　　　　引伸3:

　　　　路由別名alias

{ 
    path: '/a', 
    component: A, 
    alias: '/b' 
}
//　　/a 的別名是 /b
//意味着，當用戶訪問 /b 時，URL 會保持爲 /b，可是路由匹配則爲 /a
//就像用戶訪問 /a 同樣
//簡單的說就是給 /a 起了一個外號叫作 /b ,可是本質上仍是 /a