Vue路由初识

crainyday

前端 / Vue

发布于：2019年8月10日

字数：1.4k字

时长：6分钟

vue中的路由简介

什么是路由?

怎么使用路由?

1. SPA 与 MPA

SPA: 单页Web应用, 就是只有一张Web页面的应用(只请求一个html文件), 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序.

MPA: 每一次页面跳转时, 都会向后台服务器请求一个新的html文档, 这种类型的网站也就是多页网站, 也叫做多页Web应用.

在SPA中, 不会产生页面跳转, 但是一个页面中承载着很多功能页面(即组件), 只是更新显示不同的路由组件.

2.路由与路由器

路由器管理路由.

路由是什么? 可以说是键值对(即一种映射关系), key 是路径(即path), value: 对于后台来说是处理请求的回调函数, 对于前台来说是组件.

3.基本路由

基本步骤:

①先在项目src创建main.js和App.vue.

②从这之后vue组件分为: 非路由组件(一般放在/src/components下)和路由组件(一般放在/src/views或/src/pages目录下).

③这里在views目录下, 创建路由组件About.vue和Home.vue, 里面随便写点要显示的东西.

④创建文件/src/router/index.js 或/src/router.js, 在里面配置路由, 如下方代码.

⑤在 main.js 中配置路由器, 如下方代码.

⑥在页面组件对应地方生成路由连接 router-link.

⑦在页面组件对应地方指定要显示的路由组件 router-view.

router.js:

import Vue from 'vue'
import VueRouter from 'vue-router'
import About from './views/About'
import Home from './views/Home'
Vue.use(VueRouter)
export default new VueRouter({//向外暴露路由对象即路由器
  routes: [
    {
      path: '/about',
      component: About
    },
    {
      path: '/home',
      component: Home
    },
    {
      path: '/',
      redirect: '/about'
    }
  ]
})

main.js:

import Vue from 'vue'
import App from './App'
import router from './router'
new Vue({
  el: '#app',
  components: {
    App
  },
  template: '<App/>',
  router
})

App.vue:

<template>
  <div>
    <div class="row">
      <div class="col-xs-offset-2 col-xs-8">
        <div class="page-header"><h2>Router Test</h2></div>
      </div>
    </div>

    <div class="row">
      <div class="col-xs-2 col-xs-offset-2">
        <div class="list-group">
          <!--生成路由链接-->
          <router-link to="/about" class="list-group-item">About</router-link>
          <router-link to="/home" class="list-group-item">Home</router-link>
        </div>
      </div>
      <div class="col-xs-6">
        <div class="panel">
          <div class="panel-body">
            <!--显示上面路由链接对应的路由组件-->
            <router-view></router-view>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
  }
</script>

<style scoped>
  .router-link-active {
    color: red !important;
  }
</style>

编写使用路由实际上只有3步:

①编写路由组件

②定义路由

③使用路由: router-link和router-view标签. (这里注意keep-alive标签)

keep-alive标签: 保存 router-view 显示的组件, 在切换组件时, 不销毁之前的组件.

4.嵌套路由

嵌套路由: 顾名思义, 在路由组件中在嵌套其他路由组件.(可以多层嵌套)

①先定义路由组件News.vue和Message.vue

②定义路由(或称注册路由). 修改router.js. 之前已经配置过了路由器. 没有配置的自行配置.

③在Home.vue中使用路由.

News.vue:

<template>
  <ul>
    <li v-for="(news, index) in newsArr" :key="index">{{news}}</li>
  </ul>
</template>

<script>
  export default {
    data () {
      return {
        newsArr: ['news001', 'news002', 'news003', 'news004']
      }
    }
  }
</script>

<style scoped>

</style>

Message.vue:

<template>
    <ul>
      <li v-for="m in messages" :key="m.id">
        <a href="javascript:;">{{m.title}}</a>
      </li>
    </ul>
</template>

<script>
  export default {
    data () {
      return {
        messages: []
      }
    },
    mounted () {
      setTimeout(() => {
        //模拟ajax请求
        const messages = [
          {id: 1, title: 'messages001'},
          {id: 3, title: 'messages003'},
          {id: 4, title: 'messages004'}
        ]
        this.messages = messages
      }, 1000)
    }
  }
</script>

<style scoped>

</style>

router.js:

import Vue from 'vue'
import VueRouter from 'vue-router'
import About from './views/About'
import Home from './views/Home'
import News from './views/News'
import Message from './views/Message'
Vue.use(VueRouter)
export default new VueRouter({
  routes: [
    {
      path: '/about',
      component: About
    },
    {
      path: '/home',
      component: Home,
      children: [//定义home组件的子路由
        {
          path: '/home/news',
          component: News
        },
        {
          path: 'message',
          component: Message
        },
        {//默认路由
          path: '',
          redirect: '/home/news'
        }
      ]
    },
    {//默认路由
      path: '/',
      redirect: '/about'
    }
  ]
})

Home.vue:

<template>
  <div>
    <h2>Home</h2>
    <div>
      <ul class="nav nav-tabs">
        <!--生成路由链接-->
        <li><router-link to="/home/news">News</router-link></li>
        <li><router-link to="/home/message">Message</router-link></li>
      </ul>
      <!--显示当前路由组件-->
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Home'
  }
</script>

<style scoped>

</style>