路由详解（九阳真经）

最新推荐文章于 2024-04-26 16:13:40 发布

原创

最新推荐文章于 2024-04-26 16:13:40 发布 · 491 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端框架 #前端 #ui

本文章是小编在使用路由的时候，总结的一篇文章。里面涵盖了我们日常在时候路由的常用方法与讲解。希望我的文章能给大家带来些许帮助。祝大家：月薪过万，一飞冲天。

一、路由及路由插件的介绍

路由的概念：
1. 什么是单页应用呢？单页应用的全称是 single-page application，简称 SPA，它是一种网站应用的模型，它可以动态重写当前的页面来与用户交互，而不需要重新加载整个页面。单页应用的流畅性让 Web 应用更像桌面端或 Native 应用了。相对于传统的 Web 应用，单页应用做到了前后端分离，后端只负责处理数据提供接口，页面逻辑和页面渲染都交给了前端。前端发展到现在，单页应用的使用已经很广泛，目前时兴的 React、Vue、Angular 等前端框架均采用了 SPA 原则。单页应用意味着前端掌握了主动权，也让前端代码更复杂和庞大，模块化、组件化以及架构设计都变得越来越重要。
路由router插件介绍
1. vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。

二、router插件使用

router目录（创建一些路由规则，路径）

安装插件
1. 单独安装
```
npm install vue-router@3.2.0 --save
```
2. 脚手架中勾选
  
  新手使用 router 的时候，建议直接在使用脚手架创建 vue2 项目的时候，直接勾选，这样不容易安装错误对应的版本，导致一些错误。

创建路由模块文件 router.js(再router目录index.js)

整个router.js示例（router目录index.js）

import VueRouter from "vue-router"; //导入
import Vue from 'vue'
import NBA from '../views/NBA'
import NEWS from '../views/NEWS'

// 继承vuerouter插件
Vue.use(VueRouter)

// 实例化路由对象、创建规则·
const router = new VueRouter({
     
     
    routes:[
        {
     
     path:'/nba',
        component:NBA
        },
        {
     
     path:'/news',
        component:NEWS
        },
    ]
})

export default router

main.js(入口文件中集成路由插件到vue)

整个main.js

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

Vue.config.productionTip = false

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

App.vue(路由的占位符router-view)

<template>
  <div id="app">
    <h2>路由的学习</h2>
    <router-view></router-view>
  </div>
</template>

<script>

export default {
     
     
  name: 'App',

}
</script>

<style lang="scss">
#app {
     
     
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

二、router的常用方法

普通的路由配置

目录：router(index.js)

// 引入 对应的组件
import Home from '.../Home.vue'
import Center from '.../Center.vue'

const routes=[
    {
       
       
        // 基本的路由 配置 只需要这样两个属性即可
        path:'/home',  
        component:Home
    },
     {
       
       
        path:'/center',  
        component:Center
    },
]

声明式导航

用法：点击router-link，对应路径的组件加载到 < router-view>< /router-view>

// 声明式导航
<router-link :to="{path:'/home'}">首页</router-link>
<router-link :to="{path:'/center'}">个人中心</router-link>

// 这里是对应的组件的显示的标签
<router-view></router-view>

编程式导航

用法：写两个点击事件，在点击事件函数中写要跳到的路由，然后显示在< router-view>< /router-view>

这里的$router 代表的就是 new VueRouter()实例

<button @click="onGoHome">首页</button>
<button @click="onGoCenter">个人中心</button>

// 这里是对应的组件的显示的标签
<router-view></router-view>

<script>
    export default {
           
           
        methods:{
           
           
            onGoHome(){
           
           
                // $router 代表的就是  new VueRouter()实例
                // 这里就是 编程式导航的路由跳转
                // this.$router.push('/home')  // 这里是第一种写法
                
                this.$router.push({
           
           path:'/home'})  // 也可以传入一个对象 第二种写法
			},
            onGoCenter(){
           
           
                // 这里就是 编程式导航的路由跳转
                // this.$router.push('/center')   // 这里是第一种写法
                
                this.$router.push({
           
           path:'/center'})  // 也可以传入一个对象 第二种写法
            }
	}
}

</script>

命名路由

概念：就是给路由定义了一个名字、使用的时候更加方便

目录：router(index.js)

// 引入 对应的组件
import Home from '.../Home.vue'
import Center from '.../Center.vue'

const routes=[
    {
       
       
        path:'/home', 
        name:'home',  // 给路由添加一个 name 属性 就是命名路由了
        component:Home
    },
     {
       
       
        path:'/center', 
        name