一文快速了解与应用Vue-Router路由

Posted 2021-06-26 北极光之夜。

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一文快速了解与应用Vue-Router路由相关的知识，希望对你有一定的参考价值。

一.速识概念：

1. 后端路由：

1.根据不同的用户URL请求,返回不同的内容,本质上是URL请求地址与服务器资源之间的对应关系。

2.但是呢，后端渲染存在性能问题。

2. 前端路由：

3.所以出现了Ajax前编渲染 ，前端渲染能提高性能，但是不支持浏览器的前进后退操作。

4.这时又出现了SPA (Single Page Application)单页面应用程序，整个网站只有一个页面，内容的变化通过Ajax局部更新实现、同时支持浏览器地址栏的前进和后退操作。

5.SPA实现原理之一就是基于URL地址的 hash (hash的变化会导致浏览器记录访问历史的变化、但是hash的变化不会触发新的URL请求) 。在实现SPA过程中，其中最核心的技术点就是前端路由。

6.前端路由就是根据不同的用户事件，显示不同的页面内容。本质就是用户事件与事件处理函数之间的对应关系。

3.Vue Router：

这是官方使用文档链接。

Vue Router是Vue.js 官方的路由管理器。它和Vue.js的核心深度集成，可以非常方便的用于SPA应用程序的开发。

它的功能如下：

1.支持html5历史模式或hash模式。
2.支持嵌套路由。
3.支持路由参数。
4.支持编程式路由。
5.支持命名路由。

二.基本使用:

前提：

下面将会以一个HTML单页面演示Vue Router的基本使用步骤。在vue项目里也是一样的原理。
当前单页面基本代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">

    </div>
    <script>
        const app = new Vue({
            el:"#app",
            data: {}
        })
    </script>
</body>
</html>

可以看到什么都没有：

在这里插入图片描述
下面开始使用的具体步骤：

1.引入相关的文件：

单页面肯定得先导入vue文件与vue-router文件，这样我们才能够使用路由。

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

2.添加路由链接：

以下是一个vue提供的标签，默认会被渲染为a标签。其中有一个to属性，这个to属性会被渲染为href属性，默认值被渲染为 # 开头的hash地址。简单来说就是当用户点击不同时跳转不同内容，而这个标签就是用户要点击的东西，相当于a标签嘛。

<router-link to="/..." >...</router-link>

给我们的单页面上加一个page1和一个page2的链接：

<div id="app">
       <router-link to="/page1">Page1</router-link>
       <router-link to="/page2">Page2</router-link>
    </div>

3.添加路由填充位：

下面这个标签叫路由填充位，就是说未来通过我们的路由规则匹配到的组件，将会被渲染到 router-view所在位置。简单来说，就是用户点击路由链接，那得跳转内容吧，我们知道的是肯定不是整个页面都跳转，只是页面内相关的局部发生内容改变，这个局部就是router-view所在显示的区域。

<router-view></router-view>

给我们的页面添加：

 <div id="app">
        <router-link to="/page1">Page1</router-link>
       <router-link to="/page2">Page2</router-link>
       <router-view></router-view>
    </div>

4.定义路由组件：

既然要显示不同的内容，那肯定是用一个组件保存一份内容。
下面我们给单页面定义page1，page2这两个组件。

 <script>
        const Page1 = {
            template: '<h1>我是北极光之夜1号</h1>'
        }
        const Page2 = {
            template: '<h1>我是北极光之夜2号</h1>'
        }
        const app = new Vue({
            el:"#app",
            data: {}
        })
    </script>

5.配置路由规则井创建路由实例：

routes是路由规则数组。每个路由规则都是一个配置对象，其中至少包含path 和component 两个属性，path 表示当前路由规则匹配的hash 地址，component 表示当前路由规则对应要展示的组件。简单来说就是你点击那个链接对应的地址要对应的是哪个内容的组件。path跟router-link标签里的地址要一样，别写错了。

const router = new VueRouter({
            routes: [
                {path:'/page1',component:Page1 },
                {path:'/page2',component:Page2 }
            ]
        })

6.把路由挂载到Vue根实例中：

为了能够让路由规则生效，必须把路由对象挂载到vue 实例对象上。

 const app = new Vue({
            el:"#app",
            data: {},
            router
        })

7.效果与单页面代码：

以上我们就大工告成~

在这里插入图片描述
上面的完整代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 导入vue文件 -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
    <div id="app">
       <router-link to="/page1">Page1</router-link>
       <router-link to="/page2">Page2</router-link>
       <router-view></router-view>
    </div>
    <script>
        const Page1 = {
            template: '<h1>我是北极光之夜1号</h1>'
        }
        const Page2 = {
            template: '<h1>我是北极光之夜2号</h1>'
        }
        const router = new VueRouter({
            routes: [
                {path:'/page1',component:Page1 },
                {path:'/page2',component:Page2 }
            ]
        })
        const app = new Vue({
            el:"#app",
            data: {},
            router
        })
    </script>
</body>
</html>

三.路由重定向：

路由重定向指的是用户在访问地址A的时候,强制用户跳转到地址B，从而展示特定的组件页面。
通过路由规则的redirect属性,指定一个新的路由地址，可以很方便地设置路由的重定向。

{path:'/..',redirect: '/...'}

其中path表示重定向的原地址，redirect表示新地址。

比如第二大点的案例中，刚打开的页面如下，在根目录，但我们想一进入就显示page1，那就给根目录重定向。

在这里插入图片描述
修改路由规则如下：

 const router = new VueRouter({
            routes: [             
                {path:'/page1',component:Page1 },
                {path:'/page2',component:Page2 },
                {path:'/',redirect:'/page1'}
            ]
        })

看效果，我没点击就默认进入page1了：

在这里插入图片描述

四.嵌套路由：

功能如下：

点击父级路由链接显示模板内容。
模板内容中又有子级路由链接。
点击子级路由链接显示子级模板内容。

比如我们改进第二大点的案例，当点击page2显示page2内容时，page2里又有两个子路由连接，star和moon，当点击其中一个链接时又能显示对应的star或moon内容。

1.首先给page2组件添加两个子路由链接：

const Page2 = {
            template: `
                 <div>
                 <h1>我是北极光之夜2号</h1>
                 <hr/>
                 <router-link to="/page2/star">Star</router-link>
                 <router-link to="/page2/moon">Moon</router-link>
                 <hr/>
                 </div>`
        }

此时页面也把显示子路由链接出来了：
在这里插入图片描述

2.给两个子路由链接添加路由填充位：

  const Page2 = {
const Page2 = {
            template: `
                 <div>
                 <h1>我是北极光之夜2号</h1>
                 <hr/>
                 <router-link to="/page2/star">Star</router-link>
                 <router-link to="/page2/moon">Moon</router-link>
                 <hr/>
                 <router-view></router-view>
                 </div>`
        }

3.设置两个子组件star与moon的内容：

       const Star = {
            template: '<h2>我是北极光之夜2号下的star</h2>'
        }
        const Moon = {
            template: '<h2>我是北极光之夜2号下的Moon</h2>'
        }

4.配置路由规则：

page2的规则除了path和component属性外，再添加一个children属性，这个属性以数组表示，数组里存放其子路由的规则，其规则也是一样的，套娃套娃。

const router = new VueRouter({
            routes: [
                {path:'/page1',component:Page1 },
                {
                    path:'/page2',
                    component:Page2, 
                    children: [
                        {path: '/page2/star',component:Star},
                        {path: '/page2/moon',component:Moon}
                    ]
                }
            ]
        })

5.效果与单页面代码：

在这里插入图片描述
完整代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 导入vue文件 -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
    <div id="app">
       <router-link to="/page1">Page1</router-link>
       <router-link to="/page2">Page2</router-link>
       <router-view></router-view>
    </div>
    <script>
        const Page1 = {
            template: '<h1>我是北极光之夜1号</h1>'
        }
        const Page2 = {
            template: `
                 <div>
                 <h1>我是北极光之夜2号</h1>
                 <hr/>
                 <router-link to="/page2/star">Star</router-link>
                 <router-link to="/page2/moon">Moon</router-link>
                 <hr/>
                 <router-view></router-view>
                 </div>`
        }
        const Star = {
            template: '<h2>我是北极光之夜2号下的star</h2>'
        }
        const Moon = {
            template: '<h2>我是北极光之夜2号下的Moon</h2>'
        }
        const router = new VueRouter({
            routes: [
                {path:'/page1',component:Page1 },
                {
                    path:'/page2',
                    component:Page2, 
                    children: [
                        {path: '/page2/star',component:Star},
                        {path: '/page2/moon',component:Moon}
                    ]
                }
            ]
        })
        const app = new Vue({
            el:"#app",
            data: {},
            router
        })
    </script>
</body>
</html>

五. 动态路由匹配：

1.动态匹配路由基本使用：

如果某些路由规则的一部分是一样的，只有另一部分是动态变化的，那我们可以把这些动态变化的部分形成路由参数，这些参数就叫做动态路由匹配。
简单来说，你先看下面这些路由链接，它们都有/page/，就是后面不一样：

   <router-link to="/page/1">Page1</router-link>
   <router-link to="/page/2">Page2</router-link>
   <router-link to="/page/3">Page3</router-link>

那该咋配置路由呢？这样吗：

const router = new VueRouter({
            routes: [
                {path:'/page/1',component:Page},
                {path:'/page/2',component:Page},
                {path:'/page/3',component:Page}
            ]
        })

这样万一有很多一个个写岂不是太麻烦了，所以引入参数，在动态改变的部分定义为参数，参数前面有一个冒号,那上面可简写成如下，动态部分设为参数 ：id 。

const router = new VueRouter({
            routes: [
                {path:'/page/:id',component:Page },
            ]
        })

在组件可以通过以下语法获取当前路由的参数：

$router.params.参数名称

好，再次修改第二大点的案例完成动态路由匹配：

1.定义路由链接：

<div id="app">
   <router-link to="/page/1">Page1</router-link>
   <router-link to="/page/2">Page2</router-link>
   <router-link to="/page/3">Page3</router-link>
   <router-view></router-view>
   </div>

2.动态配置路由，参数id：

const router = new VueRouter({
    routes: [
        {path:'/page/:id',component:Page1 },
    ]
})

3.设置组件内容，并显示当前路由的参数：

const Page1 = {
    template: '<h1>我是北极光之夜1号,当前id为：{{$route.params.id}}</h1>'
}

看效果：

在这里插入图片描述

2.路由组件传参：

上面的$route与对应路由形成高度耦合，不够灵活啊，所以可以使用props将组件和路由解耦。简单来说，好像也没什么说的，直接看下面实例就能理解了。

2.1 当props为布尔类型：

        const router = new VueRouter({
            routes: [
 // 设置props，如果props为true，router.params会被设置为组件属性
                {path:'/page/:id',component:Page1,props: true },
            ]
        })  
              
        const Page1 = {
// 这时就通过props接收参数，快速简洁的接收参数id和使用它
                    props: ['id'],
                    template: '<h1>我是北极光之夜1号,当前id为：{{id}}</h1>'
                }

能达到一样的效果，且更灵活了，上面记得反过来，先定义组件才配置路由规则，只是为了直观才这样写：

在这里插入图片描述

2.2 当props为对象类型：

            const Page1 = {
        // 这时就通过props接收参数，快速简洁的接收参数对象 并显示
                props: ['name','age'],
                template: `<h1>我是北极光之夜1号,当前id为：{{id}}
                            <hr/>
                           姓名为：{{name}} ，年龄为：{{age}} </h1>`
                }
             const router = new VueRouter({
                routes: [
            // props为一个参数对象，它会原样设置为组件属性，
            // 里面的自定义的参数都能传过去，但是id传不了了
                    {path:'/page/:id',component:Page1 , props: {name:'auroras',age: 18} }
                ]
             })

效果，对象props对象里的能获取，id就不行了：
在这里插入图片描述

2.3 当props为函数类型：

这个就什么都能获取。

    const Page1 = {
// 这时就通过props接收参数，快速简洁的接以上是关于一文快速了解与应用Vue-Router路由的主要内容，如果未能解决你的问题，请参考以下文章 
 一文你带快速认识Vue-Router路由
 一文你带快速认识Vue-Router路由
 一文搞定vue-router实现原理
 Vue Router 导航守卫快速了解与上手应用
 一文搞定 Vue-router基本使用
 vue-router 快速入门