5.0 路由组件的使用

Posted shiyun32

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了5.0 路由组件的使用相关的知识,希望对你有一定的参考价值。

一、概述

路由器:路由器管理路由;

路由:路由是一种映射关系,一个key对应一个value,key是path,对于后台路由,

      value是处理请求的回调函数,对于前台路由value是组件。

 

说明:
1) 官方提供的用来实现 SPA(单个页面) 的 vue 插件
2) github: https://github.com/vuejs/vue-router
3) 中文文档: http://router.vuejs.org/zh-cn/
4) 下载: npm install vue-router --save

 

1. 路由的使用

(1) VueRouter(): 用于创建路由器的构建函数
  new VueRouter(  // 创建路由器实例
    // 多个配置项(配置对象)
  )


(2)路由配置
  routes: [
     // 一般路由
      path: ‘/about‘,  
      component: About
    ,
     // 自动跳转路由
      path: ‘/‘,
      redirect: ‘/about‘
    
  ]


(3)注册路由器
  import router from ‘./router‘
  new Vue(
    router
  )


(4)使用路由组件标签
   <router-link>: 用来生成路由链接(当点击路由连接的时候需要在界面上显示当前路由组件)
   eg: <router-link to="/home">Go to home</router-link>

      <router-link to="/about">Go to about</router-link>


   <router-view>: 用来显示当前路由组件界面
   eg: <div> 

      <router-view></router-view>  //表示如果点击了路由链接(/about),则该路由链接的界面显示在这里,即显示在这个div里面.

    </div>

 

2. 缓存路由组件对象

正常情况下,一个路由组件被切换的时候,这个路由组件就会死亡,在切换回来时,又重先创建。

路由组件的缓存就是,在切换的时候将路由组件进行缓存,不要让它死亡。实现:

<keep-alive>
  <router-view></router-view>   // 缓存路由组件对象,只是平时我们会说缓存路由组件  (这里为保持About和Home活着)
</keep-alive>

现象:在如下图About组件的输入框输入abc后,切换到Home组件,然后在切回About组件,此时输入框还显示abc。

 

3. 向路由组件传递参数

方式一:  路由路径携带参数(param/query)

这里的参数有两种类型,param参数和query参数(这两种参数的传递等效),以下实例为param参数的传递,如果要使用query参数类型

传递参数,则不需要写下面的:id占位符,<router-link>路由链接中,路径的拼接方式和以前一样如: xxxx?id=1
1) 配置路由
children: [
  
    path: ‘mdetail/:id‘,  //占位符
    component: MessageDetail
  
]
2) 路由路径
  <router-link :to="‘/home/message/mdetail/‘+m.id">m.title</router-link>
3) 路由组件中读取请求参数
  this.$route.params.id

 

方式二:<router-view>属性携带数据

<router-view :msg="msg"></router-view>

以下实例中App.vue通过msg属性将数据传递至About组件中。

 

4. 编程式路由导航

相关 API
1) this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面)
2) this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)
3) this.$router.back(): 请求(返回)上一个记录路由
4) this.$router.go(-1): 请求(返回)上一个记录路由
5) this.$router.go(1): 请求下一个记录路由

 

二、使用(基本路由/嵌套路由)

先下载vue-router包:npm install vue-router --save

非路由组件一般放在components文件夹下,路由组件一般放在views|pages文件夹下; 

1. 路由的使用步骤:

步骤一: 定义路由组件

index.html

技术图片
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="stylesheet" href="/static/css/bootstrap.css">
  <title>vue_demo</title>

  <style> /*设置选择路由时的样式,!important表示 提高指定样式规则的应用优先权*/
    .router-link-active 
      color: red !important;
    
  </style>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
View Code

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">
          <!--5.使用路由标签-->
          <!-- 生成路由链接 -->
          <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">
            <!-- 显示当前组件 -->
            <keep-alive>
              <!--传递一个属性,值为abc,如果写成:msg="abc", 则abc为变量-->
              <router-view msg="abc"></router-view>
            </keep-alive>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<!--根组件-->
<script>
  export default 
</script>

<style>

</style>
View Code

 About.vue/Home.vue:用户演示基本路由

技术图片
<template>
  <div>
    <h2>About</h2>
    <p>msg</p>
    <input type="text">
  </div>
</template>

<!--About组件-->
<script>
  export default 
    // 接收一个属性,这个属性是由App组件路由传递过来的
    props: 
      msg: String
    
  
</script>

<style>

</style>
View Code
技术图片
<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>

<!--Home组件-->
<script>
  export default 
</script>

<style>

</style>
View Code

News.vue/Message.vue:Home下的子路由,用户演示嵌套路由

技术图片
<template>
  <ul>
    <li v-for="(news, index) in newsArr" :key="index">news</li>
  </ul>
</template>

<script>
  export default 
    data () 
      return 
        newsArr: [‘News001‘, ‘News002‘, ‘News003‘]
      
    
  
</script>

<style>

</style>
View Code
技术图片
<template>
  <!--根标签div:只能有一个-->
  <div>
    <ul>
      <!-- :key一般写index,如果这个对象里面有标识属性,则最好写标识属性-->
      <li v-for="m in messages" :key="m.id">
        <!--要拼接字符串得是js语法,不能是html的语法,所以,这里是:to="" , 如果用es5的语法则为 :to="‘‘", 如果用es6的语法则为:to="``"-->
        <router-link :to="`/home/message/detail/$m.id`">m.title</router-link>
        <button @click="pushShow(m.id)">push查看</button>
        <button @click="replaceShow(m.id)">replace查看</button>
      </li>
    </ul>
    <button @click="$router.back()">回退</button>
    <hr>
    <router-view></router-view>
  </div>
</template>

<script>
  export default 
    data () 
      return 
        messages: [
          /* id: 1, title: ‘Message001‘,
           id: 3, title: ‘Message003‘,
           id: 5, title: ‘Message005‘*/
        ]
      
    ,

    mounted ()  // 用于异步操作
      // 模拟ajax请求从后台获取数据,注意:回调函数要用箭头函数
      setTimeout(() => 
        const messages = [
          id: 1, title: ‘Message001‘,
          id: 3, title: ‘Message003‘,
          id: 5, title: ‘Message005‘
        ]
        this.messages = messages
      , 1000)
    ,

    methods: 
      pushShow (id) 
        this.$router.push(`/home/message/detail/$id`)
      ,

      replaceShow (id) 
        this.$router.replace(`/home/message/detail/$id`)
      
    
  
</script>

<style>

</style>
View Code

MessageDetail.vue: Message下的子路由

技术图片
<template>
  <ul>
    <!--$route表示当前路由-->
    <li>id: $route.params.id</li>
    <li>title: detail.title</li>
    <li>content: detail.content</li>
  </ul>
</template>

<script>
  /*这里面就没有做异步了,真实的情况应该是详情页面根据传递过来的id去后台查询*/
  const messageDetails = [
    id: 1, title: ‘Message001‘, content: ‘message content00111....‘,
    id: 3, title: ‘Message003‘, content: ‘message content00222....‘,
    id: 5, title: ‘Message005‘, content: ‘message content00333....‘
  ]
  export default 
    data() 
      return 
        detail:   // 里面的属性不用列举
      
    ,
    mounted () // 改变当前路由组件参数数据时, 不会重新创建组件对象, mounted不会重新执行,所以这里需要用watch去监视
      // 模拟异步到后台查询数据
      setTimeout(() => 
        const id = this.$route.params.id // 这是传递过来的id,有可能传递过来后就变成文本了,乘以1后就变成数字了
        this.detail = messageDetails.find(detail => detail.id===id*1)
      , 1000)
    ,

    watch: 
      // 方法一
      // $route: function ()  // 改变当前路由组件参数数据时自动调用(组件对象有$route这个属性)
      //   console.log(‘$route()‘)
      //   const id = this.$route.params.id
      //   this.detail = messageDetails.find(detail => detail.id===id*1)
      // 
      $route: function (value)  // 方式二
        console.log(value);
        const id = value.params.id
        console.log(id);
        this.detail = messageDetails.find(detail => detail.id===id*1)
      
    
  
</script>

<style>

</style>
View Code

 

步骤二:注册路由组件(将路由组件映射成路由)

router/ index.js:

/*
路由器对象模块
 */
import Vue from ‘vue‘ //引入vue
import VueRouter from ‘vue-router‘ //1. 引入vue的路由器组件

import About from ‘../pages/About.vue‘ //引入路由组件
import Home from ‘../pages/Home.vue‘
import News from ‘../pages/News.vue‘
import Message from ‘../pages/Message.vue‘
import MessageDetail from ‘../pages/MessageDetail.vue‘

Vue.use(VueRouter) // 2.声明使用vue-router插件

// 3.对外暴露路由器对象(这里为默认暴露,默认暴露,引入时可以使用任何名字)
export default new VueRouter(
  routes: [   // 注册应用中所有的路由
    
      path: ‘/about‘,
      component: About
    ,
    
      path: ‘/home‘,
      component: Home,
      children: [  // 配置子路由组件
        
          path: ‘/home/news‘, // path最左侧的/永远代表根路由
          component: News
        ,
        
          path: ‘message‘, // 这是简化写法
          component: Message,
          children: [
            
              path: ‘detail/:id‘,  // :id表示占位符
              component: MessageDetail
            
          ]
        ,
        
          path: ‘‘, // 设置子路由的默认显示,代表当前,这里为/home,因为这是/home下的自路由
          redirect: ‘/home/news‘
        
      ]
    ,
    
      path: ‘/‘,  // 设置默认请求about,即当请求根路径的时候
      redirect: ‘/about‘ // 重定向请求/about
    
  ]
)

main.js:注册路由器

技术图片
/*
入口JS
 */
import Vue from ‘vue‘
import App from ‘./App.vue‘
import router from ‘./router‘ //引入路由器(因为是index.js,所以这里直接写到./router就可以了)


new Vue(//配置对象的属性名都是一些确定的属性名,不能随便修改
  el: ‘#app‘,
  components: App, // 映射组件标签
  template: ‘<App/>‘, // 指定需要渲染到页面的模板
  router  // 4.注册路由器  等价于 router: router
)
View Code

 

步骤三:使用路由(标签)

关于路由的使用主要是使用路由标签-路由链接 <router-link> 、当前路由<router-view>,在以上实例中主要存在App.vue、

News.vue、Messages中。

 

效果图:

技术图片|技术图片

        图1                           图2

 

以上是关于5.0 路由组件的使用的主要内容,如果未能解决你的问题,请参考以下文章

Flutter之beamer路由入门指南

vue的生命周期和路由守卫

从 Laravel 4.2 升级到 5.0 后获取 POST 的路由未定义错误

ASP.Net Core 5.0 中的子域路由

Packet Tracer 5.0实验 路由器静态路由配置

Packet Tracer 5.0实验 路由器单臂路由配置