Vue-Router 基础资料

 

概述

vue-router和vue.js是深度集成的,适合用于单页面应用.传统的路由是用一些超链接来实现页面切换和跳转.而vue-router在单页面应用中,则是组件之间的切换.其本质就是:建立并管理url和对应组件之间的映射关系.

官网: https://router.vuejs.org/zh/

提示：以下是本篇文章正文内容，下面案例可供参考

一、Vue-Router下载

1.怎么下Router？

  自动安装：在下载vue项目的时候，在交互式命令行中选中Router 脚手架就会自动安装vue-router。

手动安装：通过命令行输入以下代码   

1. npm install vue-router -S
2.在项目的根目录创建 router 的目录
3.在router目录中创建 index.js 文件
4.在index.js中导入需要使用的模板
 （1）import Vue from 'vue'
 （2）import VueRouter from 'vue-router'
 （3）Vue.use(VueRouter)
5.创建路由实例对象 const router = new VueRouter({ rules  })
6.导出路由对象 export default router
7.在项目的主入口添加 mian.js上 添加 new Vue({ router})



  

二、Vue-Router

1.首说明一下Vue-Router提供的两个组件router-link和router-view

router-link:实质上最终会渲染成a链接 to属性等价于提供 href属性(to无需#)。

router-view:就是在标签内渲染你路由匹配到的视图组件。

2.声明式导航-跳转传值

目标: 在跳转路由时, 可以给路由对应的组件内传值

在router-link的to属性传值，语法如下

第一种方法：

/path?参数名=值/

对应页面组件接受传递过来的值

$route.query.参数名




如下代码演示

  1.路由定义
    {
    path: "/part",
     component: Part
    },
  2.在Part上  to属性添加传递的路径

     <router-link to="/part?name=小传">朋友-小传</router-link>
 
  3. 在 MyGoods.vue 准备接收路由上传递的参数和值

     <p>人名: {{ $route.query.name }}</p>

第二种方法：

/path/值 – 需要路由对象提前配置 path: “/path/参数名”

对应页面组件接受传递过来的值

$route.params.参数名


代码演示


  1.路由定义
    {
    path: "/part/:username", // ：传入的属性名
    component: Part
    },

  2.在Part上  to属性添加传递的路径
    <router-link to="/mygoods/小智">朋友-小智</router-link>

  3. 在 MyGoods.vue 准备接收路由上传递的参数和值
     <p>人名:{{ $route.params.username }}</p>

 

3.编程式导航

什么是编程式导航

编程式导航就是在vue组件内部通过this.$router访问路由实例,并通过this.$router.push导航到不同的url,进行路由映射。

为什么要用编程式导航？

因为用<router-link>的话就直接跳转了.而编程式语言跳转前可以进行一些操作。

 

 编程式导航的写法

 router.push 方法.该方法的参数可以是一个字符串路径,或者一个描述地址的对象.如下

//字符串
this.$router.push('home')

//对象
this.$ruter.push({path:'home'})

//命名路由
this.$router.push({name:'user',params:{userId:2333}})

//带查询参数,变成/register?plan=private
this.$router.push({path:'register',query:{plan:'private'}})

注意:path和params是不能同时生效的!,否则params会被忽略掉.所以使用对象写法进行params传参时,要么就是path加冒号:,要么就是像上例中的'命名路由'.通过name和params进行传参.然而query却并不受影响,有没有path都可以进行传参.

router.replace方法

它和和router.push写法一样，但是效果不同，push是往history里面添加新记录，而replace是直接将当前浏览器history记录替换掉

router.go(n) 方法

这个方法的参数是一个整数，他是记录history中前进后退多少步，可以控制页面前进或者后退多少步

 4.嵌套路由

嵌套路由：就是在现有的一级路由下, 再嵌套二级路由

如何配置？

1.写在当前页面路由的children属性中

路由定义
const routes = [
  // ...省略其他
  {
    path: "/find",
    name: "Find",
    component: Find,
    children: [
      {
        path: "recommend",
        component: Recommend
      },
      {
        path: "ranking",
        component: Ranking
      },
      {
        path: "songlist",
        component: SongList
      }
    ]
  }
  // ...省略其他
]

2.在当前页面中留下 router-view

5.路由模式 

路由模式分为 hash 和history 

Hash:默认使用就是hash模式，当url变化时是不会重新加载浏览器，hash模式就是通过改变#后面的值,实现浏览器渲染指定的组件.

History:history模式就是通过pushState()方法来对浏览器的浏览记录进行修改,来达到不用请求后端来渲染的效果。而且地址中没有#，但是需要服务端配置修改配置，不然刷新会出现404。history需要配置，代码如下

const router = new VueRouter({
  mode: 'history', //如果这里不写,路由默认为hash模式
  routes: [...]
})

 

6.动态路由 

有一类的地址 user/xxx ，地址后面跟随的参数是动态的不固定的，那么种类型的路由地址的对应规则 { path：‘/地址：参数名’}

7.路由守卫

路由守卫: 路由跳转之前, 先执行一次路由守卫函数, 判断是否可以正常跳转

// 目标: 路由守卫
// 场景: 当你要对路由权限判断时
// 语法: router.beforeEach((to, from, next)=>{//路由跳转"之前"先执行这里, 决定是否跳转})
// 参数1: 要跳转到的路由 (路由对象信息)    目标
// 参数2: 从哪里跳转的路由 (路由对象信息)  来源
// 参数3: 函数体 - next()才会让路由正常的跳转切换, next(false)在原地停留, next("强制修改到另一个路由路径上")
// 注意: 如果不调用next, 页面留在原地

// 例子: 判断用户是否登录, 是否决定去"我的音乐"/my
const isLogin = true; // 登录状态(未登录)
router.beforeEach((to, from, next) => {
  if (to.path === "/my" && isLogin === false) {
    alert("请登录")
    next(false) // 阻止路由跳转
  } else {
    next() // 正常放行
  }
})