vue项目实战（八）：初识Vue Router-前端路由的原理与基本使用

最新推荐文章于 2023-02-19 22:41:41 发布

Ordinary_yfz

最新推荐文章于 2023-02-19 22:41:41 发布

阅读量432

点赞数

分类专栏：开发文章标签： javascript

本文链接：https://blog.csdn.net/csyifanZhang/article/details/105011183

版权

开发专栏收录该内容

32 篇文章 1 订阅

订阅专栏

文章目录

Vue Router简介
各种路由实现方式
基本使用
进阶使用
- 1-路由命名
- 2-路由参数

Vue Router简介

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式，在 IE9 中自动降级
自定义的滚动条行为

各种路由实现方式

传统的开发方式，url改变后，立即发出请求响应整个页面，有可能需要加载的资源过多，传统的开发会让页面出现白屏。
SPA single page application：单页面应用：锚点值改变后，不会立刻发送请求，而是在某个合适的时机，发起ajax请求，页面进行局部渲染。不会立刻跳转，用户体验比较好。

基本使用

1-下载与引包

如果你用的项目创建链接中的项目创建方法，那么大概率你现在以经下载了vue-router和一并插件了，就在下图那里。
接下来，在使用vue-router之前，我们必须在html/vue文件中引入相应的包，

<!--由于vue-router是依赖于vue的，所以两个包必须都引入，而且顺序必须是这样-->
<script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
<script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.min.js"></script>

我们引入的vue-router包会给我们带来2个全局组件，

router-link组件，相当于html中的a，他有一个to属性，相当于HTML中的href，在路由会发生改变的地方，我们使用<router-link to="dst"></router-link>代替之前的<a href='dst'></a>。
router-view：路由匹配组件的出口。通常位于<router-link to="dst"></router-link>语句的下方
示例：

    var App={
      template:`
      <div>
        <router-link to='/login'>登陆页面</router-link>
        <router-link to='/register'>注册页面</router-link>
        <router-view></router-view>
      </div>
      `
    },

在这里插入图片描述

2-创建与配置路由对象

（1）传统路由匹配

我们必须创建一个VueRouter的实例化对象，才能执行路由的各个功能。这个对象的内部包含很多元素，其中最重要的是一个列表routers[]对象。他有什么作用呢，在routers的内部，有很多个列表，每个列表有两部分组成，一个是path，代表路由所要匹配的对象，如果现在我们的路径是"./login"，那么就会使用Login这个组件进行渲染。

 //创建router对象
 var router = new VueRouter({
   //配置路由对象
   routers:[
     //路由匹配的规则
     {
       path:"/login",//不用#，默认有#号
       component:Login //一旦匹配到path值，就调用Login组件
     },
     {
       path:"/register",//不用#，默认有#号
       component:Register //一旦匹配到path值，就调用Login组件
     }
   ]
 });

（2）动态路由匹配

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果：

const User = {
  template: '<div>User</div>'
}

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})

现在呢，像 /user/foo 和 /user/bar 都将映射到相同的路由。

一个“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。于是，我们可以更新 User 的模板，输出当前用户的 ID：

（3）注意事项

路径匹配成功后渲染的组件尽量声明为局部组件，有时候会遇到不可名状的错误。

3-将创建成功的router对象交给Vue实例对象管理

这步比较简单，我们只需要创建一个Vue实例化对象，然后在内部声明我们创建的router对象即可。

    new Vue({
      el:"#app",
      data(){
        return{

        }
      },
      components:{
        App
      },
      //交给Vue实例化对象管理
      router,
      template:`<App/>`,

    })

4-一个小demo

给定下列代码

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>myVue</title>
    <!--由于vue-router是依赖于vue的，所以两个包必须都引入，而且顺序必须是这样-->
    <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
  </head>
 <body>
   <div id="app"></div>
   <script type="text/javascript">
   var Login={
    template:`
        <div>我是登陆页面</div>
      `
   };
   var Register={
    template:`
        <div>我是注册页面</div>
      `
   };
    //创建router对象
    var router = new VueRouter({
      //配置路由对象
      routes:[
        //路由匹配的规则
        {
          path:"/login",//不用#，默认有#号
          component:Login //一旦匹配到path值，就调用Login组件
        },
        {
          path:"/register",//不用#，默认有#号
          component:Register //一旦匹配到path值，就调用Login组件
        },
      ]
    });
    var App={
      template:`
      <div>
        <router-link to='/login'>登陆页面</router-link>
        <router-link to='/register'>注册页面</router-link>
        <router-view></router-view>
      </div>
      `
    };
    new Vue({
      el:"#app",
      data(){
        return{

        }
      },
      components:{
        App
      },
      //交给Vue实例化对象管理
      router,
      template:`<App/>`,

    })
  </script>
 </body>

</html>