Vue2的前端路由(vue-router)

导读:本篇文章讲解 Vue2的前端路由(vue-router),希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

一、路由

        路由 (英文:router)就是页面地址与组件之间的对应关系

二、路由方式

        服务器端路由、前端路由

三、前端路由

       前端路由:地址和组件之间的对应关系,即由前端来维护一组路由规则(地址和组件之间的对应关系),实现模式有两种:

        1. 利用URL的hash模式: 就是常说的锚点,JavaScript通过hashChange事件来监听URL的改变。在地址前带有#

        2. 利用HTML5的History模式:由Html5使用,地址前不带#,地址之间用“/”分隔。它使用URL看起来像普通网站一样,这种模式需要服务器端支持,服务端在接收到所有的请求后,都指向同一个HTML文件,不然会出现页面错误

四、SPA:单页面应用(Single Page Application)

​        一个Web网站只有一个html页面,所有组件的切换都在一个页面中完成。组件之间的切换是通过前端路由来实现的

​        结论:在SPA 项目中,不同功能之间的切换,要依赖于前端路由来完成!

五、前端路由的工作方式

        1. 用户点击页面中的路由链接

        2. URL的hash地址就会发生改变

        3. 前端路由监听到了URL的改变

        4. 前端路由会查找路由表,将hash地址对应的组件渲染到浏览器中

六、vue-router路由模块

        vue-router路由模块是由vue.js官方给出的前端路由模块,只能和vue项目结合,方便SPA项目实现组件之间的切换

        1. vue-router的版本

​ (1)vue2中使用vue-router3:npm install vue-router@3

​ (2)vue3中使用vue-router4

        2. vue-router的组成部分

​ (1)VueRouter:路由器类(路由器组件),用来维护路由表(URL地址与组件的映射)​,根据路由请求在路由视图中动态渲染选中的组件

​ (2)router-link:路由链接组件,本质就是标签,声明用以提交路由请求的用户接口 ​

​ (3)router-view:路由视图组件(路由出口),主要负责动态染路由选中的组件

Vue2的前端路由(vue-router)

 七、示例

        1. 创建三个组件:Home、Movie、About

        2. 在src下创建router/index.js:创建路由器实例

//1.导入Vue 和VueRouter
import Vue from 'vue'
import VueRouter from 'vue-router'

//2.在Vue中注册VueRouter
Vue.use(VueRouter)

//3.创建路由器(VueRouter)的实例
const router = new VueRouter()

//4.导出路由器对象
export default router

        3. 在src/main.js入口文件中挂载路由器

import Vue from 'vue'
import App from './App.vue'
import router from "@/router";

Vue.config.productionTip = false

new Vue({
  router,  //在Vue中挂载路由器
  render: function (h) { return h(App) },
}).$mount('#app')

        4. 在App.vue中声明路由链接: <router-link></router-link>和渲染组件的<router-view>

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <router-link to="/home">首页</router-link>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <router-link to="/movie">电影</router-link>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <router-link to="/about">关于</router-link>
    <hr/>
    <router-view></router-view>
  </div>
</template>

        5. 声明路由的匹配规则:在 src/router/index.js 路由模块中,通过 routes 数组声明路由的匹配规则。

//3.创建路由器(VueRouter)的实例
const router = new VueRouter({
    //3.1定义路由表routes:包含若干对象,每个对象实现了链接地址和组件之间的映射
    routes:[
        {
            path:'/home',
            component:()=> import('../components/Home')
        },
        {
            path:'/movie',
            component:()=> import('../components/Movie')
        },
        {
            path:'/about',
            component:()=> import('../components/About')
        }
    ],
    //3.2设置路由模式
    mode:"history",
})

八、vue-router中常用的方法

        1. 路由重定向:使用redirect 属性,用户在访问地址A时,强制用户跳转到地址C

//3.创建路由器(VueRouter)的实例
const router = new VueRouter({
    //3.1定义路由表routes:包含若干对象,每个对象实现了链接地址和组件之间的映射
    routes:[
        {
          path:'/',  //表示项目的根目录
          redirect:'/home'
        },
        {
            path:'/home',
            component:()=> import('../components/Home')
        }
    ],
    //3.2设置路由模式
    mode:"history",
})

        2. 嵌套路由:在组件中嵌套显示组件(通过路由实现组件的嵌套显示)

Vue2的前端路由(vue-router)

         (1)创建两个组件:Tab1、Tab2

​         (2)声明子路由链接和子路由占位符:在 About.vue 组件中,声明tab1 和 tab2 的子路由链接以及子路由占位符。

<template>
  <div>
    <h2>
      我是About组件
    </h2>
    <router-link to="/about/tab1">tab1</router-link>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <router-link to="/about/tab2">tab2</router-link>
    <hr width="500" color="red"/>
    <router-view></router-view>
  </div>
</template>

​         (3)通过 children 属性声明子路由规则:在 src/router/index.js 路由模块中,导入需要的组件,并使用 children 属性声明子路由规则

//3.创建路由器(VueRouter)的实例
const router = new VueRouter({
    //3.1定义路由表routes:包含若干对象,每个对象实现了链接地址和组件之间的映射
    routes:[
        {
            path:'/about',
            component:()=> import('../components/About'),
            children:[  //子路由表
                {
                    path:'tab1',
                    component:()=> import('../components/Tab1')
                },
                {
                    path:'tab2',
                    component:()=> import('../components/Tab2')
                }
            ]
        }
    ]
})

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之家整理,本文链接:https://www.bmabk.com/index.php/post/79738.html

(0)
小半的头像小半

相关推荐

极客之家——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!