Vue.js筆記(四) 路由router與重定向

一級路由配置

前置條件

vue工程中安裝了router

其中在router文件夾中的index.js為配置文件

並在入口文件main.js中進行配置

import router from './router'

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

配置

(1)router配置文件

配置文件的結構如下

import Vue from 'vue'
import VueRouter from 'vue-router'
import Movie from '@/views/Movie'
import Cinema from '@/views/Cinema'
import Center from '../views/Center.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  // mode: 'history',
  // base: process.env.BASE_URL,
  routes: [
    {
      path: '/cinema',
      component: Cinema
    },
    {
      path: '/center',
      component: Center
    },
    {
      path: '/movie',
      component: Movie
    }
  ]
})

export default router

因為頁面級的組件創建在views的文件夾下

所以可以看到兩種導入方式

import Cinema from '@/views/Cinema'
import Center from '../views/Center.vue'

實際上，@就是指向src文件夾

(2)入口文件

在main.js中進行導入

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

Vue.config.productionTip = false

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

(3)插槽

路由指向的組件在需要被調用的時候使用 <router-view></router-view>插槽即可

聲明式導航

(1)原生版本

寫一個tabber組件，調用，完事

<template>
    <div>
        <ul>
            <li><a href="#/cinema">cinema</a></li>
            <li><a href="#/movie">movie</a></li>
            <li><a href="#/center">center</a></li>
        </ul>
    </div>
</template>

注意：href中要加上#

(2)vue版本

原生版本可以實現路由

但是還有一些漏洞，比如：

頁面跳轉后li的樣式變換不好做，還要用jq等工具

所以vue給我做了個輪子

router-link

把tabber組件的代碼改為如下：

<template>
    <div>
        <ul>
            <router-link to="/cinema" tag="li" active-class="select">cinema</router-link>
            <router-link to="/movie" tag="li" active-class="select">movie</router-link>
            <router-link to="/center" tag="li" active-class="select">center</router-link>
        </ul>
    </div>
</template>

<style lang="css" scoped>
    .select{
        color: red
    }
</style>

保存后再看一下

發現一切都和想象中的一樣好起來了

router-link中的一些參數解釋：

• to:路由到的頁面，不用加#

• tag:渲染的樣式

• active-class:被選中后的樣式class

  比如剛剛的例子渲染完就是這樣

  

重定向

路由配置完畢后，打入http://localhost:8080/,我們直接進入到了主界面。

如果想要進入首頁的時候自動跳轉到某個頁面（比如movie）怎么辦？

很簡單，在配置路由時在routers中加上：

    {
      path: '*',
      redirect: '/movie'
    }

就可以了

一切不在已定義的跳轉都會重定向到/movie

二級路由

我們的目標是在/movie路由下設值兩個二級路由

• /movie/nowplaying
• /movie/commingsoon

配置子路由

在router的配置文件中為movie路由添加一個children屬性

    {
      path: '/movie',
      component: Movie,
      children: [
        {
          path: 'nowplaying',
          component: Nowplaying
        },
        {
          path: 'commingsoon',
          component: Commingsoon
        }
      ]
    },

注意：這里的二級path有兩種寫法

• path: 'commingsoon',
• path: '/movie/commingsoon',

但是千萬不能寫成/commingsoon

然后寫兩個組件，並且進行import，這里不再贅述

注意：為了規范，建議在創建兩個子組件的時候放在一個新的文件夾里

比如，這里的Commingsoon和Nowplaying組件，我們就放在/views/Movie文件夾下

router-view與router-link

和一級路由介紹的一樣，先做一個二級tabber

<template>
    <div>
        <ul>
            <router-link to="/movie/commingsoon" tag="li" active-class="select">commingsoon</router-link>
            <router-link to="/movie/nowplaying" tag="li" active-class="select">nowplaying</router-link>
        </ul>
    </div>
</template>

然后在Movie組件中進行調用

<template>
    <div>
        movie
        <movietabber></movietabber>
        <router-view></router-view>
    </div>
</template>

<script>
import MovieTabber from '../components/MovieTabber'
export default {
  components: {
    movietabber: MovieTabber
  }
}
</script>

跑起來，發現沒有問題

二級redirect

還有一些小問題，比如訪問/movie的時候，兩個子組件是不會顯示的

實際項目中應該至少要顯示一些東西

在配置文件下添加重定向，添加后如下：

    {
      path: '/movie',
      component: Movie,
      children: [
        {
          path: 'nowplaying',
          component: Nowplaying
        },
        {
          path: 'commingsoon',
          component: Commingsoon
        },
        {
          path: '',
          redirect: 'nowplaying'
        }
      ]
    },

發現默認會有選擇，好起來了