小白学Vue-Router记录

Vue-Router是做什么的

Vue在开发时对路由支持的不足，后来官方补充了vue-router插件.
这里的路由并不是指我们平时所说的硬件路由器，这里的路由就是SPA（单页应用）的路径管理器。

使用vue-router可以快速帮我们创建单网页应用

每一页的地址是唯一的

不管是前端路由还是后端路由，都是指导一个网页的层级，定位资源

---

1.安装和基本配置

安装

1. CDN下载vue-router.js文件
2. npm安装vue-router包

基本配置

JS代码

const About = {
      template: `
      <div>
        <h1>关于我们</h1>
      </div>
      `,
    }

const routes = [//路由是一个数组，每一个路由配置是其中的一个对象
  {
    path: '/',//路径，输入在网页地址栏
    name: 'Hello',//路由名称
    component: {//该路由显示内容模板
      template: `
      <div>
        <h1>首页</h1>
      </div>
      `,
    },
  }, 
  {
    path: '/about',
    name: 'About',
    component: About,//组件还可以从其他文件引入，使用import,export
  }
]

//上面已经定义好路由，但是Vue并不知道这个数组是路由规则
//所以把这个数组告诉Vue，VurRouter是vue-router暴露出来的构造器
let router = new VueRouter({  //实例化router
  routes: routes,  //可以传其它参数
})

new Vue({
  el: '#app1',
  router: router,
})

HTML代码

<div id="app1">
    <div>
      <router-link to="/">首页*</router-link>
      <router-link to="/about">关于我们*</router-link>
    </div>
    <div>
      <!--该路由配置所对应的插件应该渲染的位置-->
      <router-view></router-view>
    </div>
</div>

---

2.路由对象属性介绍

• $route.path 类型：string字符串，对应当前路由的路径，总是解析为绝对路径，如"/foo/bar"。

• $route.params 类型：Object 一个 key/value 对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象

• $route.query 类型：Object 一个 key/value 对象，表示 URL 查询参数。例如，对于路径/foo?user=1，则有 $route.query.user == 1，如果没有查询参数，则是个空对象。

• $route.name 当前路由的名称，如果有的话。这里建议最好给每个路由对象命名,方便以后编程式导航.不过记住name必须唯一!

• $route.hash 类型：string当前路由的 hash 值 (带#) ，如果没有 hash 值，则为空字符串。

• $route.fullPath 类型：string 完成解析后的 URL，包含查询参数和 hash 的完整路径。

• $route.matched 类型：Array<RouteRecord> 一个数组，包含当前路由的所有嵌套路径片段的路由记录 。路由记录就是 routes 配置数组中的对象副本 (还有在children 数组)。

• $route.redirectedFrom 如果存在重定向，即为重定向来源的路由的名字

---

3.参数传递

首先介绍下<router-link to="...">用法：to里的值可以是一个字符串路径，或者一个描述地址的对象

// 字符串,只有这个能用to
<router-link to="apple"> to apple</router-link>
<router-link :to="apple"> to apple</router-link>

// 对象
<router-link :to="{ path: 'apple' }"> to apple</router-link>

// 命名路由
<router-link :to="{ name: 'applename' }"> to apple</router-link>

// 命名路由 带查询参数query，地址栏变成/apple?color=red
<router-link :to="{ name: 'applename', query: {color: 'red' } }"> to apple</router-link>

// 命名路由 带路由参数params，地址栏是/apple/red
<router-link :to="{ name: 'applename', params: { color: 'red' } }"> to apple</router-link>

// 直接路由 带查询参数query，地址栏变成 /apple?color=red
<router-link :to="{ path: 'apple', query: {color: 'red' } }"> to apple</router-link>

// 直接路由 带路由参数params，params 不生效，如果提供了 path，params 会被忽略
<router-link :to="{ path: 'apple', params: { color: 'red' } }"> to apple</router-link>

正题

方法1：使用params进行配置

• 一个路径参数使用 ’ : ’ 冒号进行标记.
• 当匹配到一个路由时,参数就会被设置到this.$route.params,可以在每个组件内使用

HTML代码

<router-link to="/user/绿皮车?age=20">绿皮车</router-link>
<router-link to="/user/驯龙高手3?age=3">驯龙高手3</router-link>

JS代码

{
    path: '/user/:name',
    name: 'user',
    component: {
      template: `
      <div>
        <div>我叫：{{ $route.params.name }}</div>  // path里的name
        <div v-if="age">我今年{{ $route.query.age }}岁了</div>  // 通过 url 传递参数
      </div>
      `,
    },
  }

方法2：通过query进行配置传参.
形式： XXX?a=1&b=2…

演示

vue-route会自动将?后的age=20封装进this.$route.query里.

此时,在组件里this.$route.query.age值为20

除了通过router-link的to属性. query也可以通过编程式导航进行传参

例子

HTML

<router-link :to="{ name: 'about', params: { color: 'red' } }">关于我们*</router-link>

JS

{
    path: '/about',
    name: 'about',
    component: {
      template: `
      <div>
        <h1>关于我们</h1>
        <p>传递参数：{{ $route.params.color }}</p>
      </div>
      `,
    },
  },

演示

上述都是通过<router-link>触发访问和传参
现在介绍一下 手动访问和传参

HTML代码

<button @click="surf">手动访问</button>

JS代码

new Vue({
  ...
  methods: {
  	surf() {    //例子：用户点击一侧自动访问一系列连接
  		setTimeout(function() {
  		  this.route.push('/about');    // 手动访问
  		  setTimeout(function() {
 		     this.route.push('{ name= ‘user’, params: {...} }');    // 手动传参
		  })													    //path和params不共用
  		}, 2000)
  	}
  }
})

---

4.子路由

在上述例子 绿皮车 和 驯龙高手 下添加子路由

JS代码

{
    path: '/user/:name',
    name: 'user',
    component: {
      template: `
      <div>
        <div>我叫：{{ $route.params.name }}</div>
        <div>我今年{{ $route.query.age }}岁了</div>
        
        <router-link :to="'/user/' + $route.params.name + '/more'">更多信息</router-link>
        <router-link to="more" append>更多信息</router-link>
        <router-view></router-view>
      </div>
      `,
    },
    children: [  //写法跟routes一样
      {
        path: 'more',
        component: {
          template: `
          <div>
            用户{{ $route.params.name }}的详细信息
          </div>
          `
        }
      }
    ]

步骤

1. children子数组建立
2. 在template 中添加 router-view 和 router-link
3. 两种路由页面跳转方法 :to="'/user/' + $route.params.name + '/more'" 或者 to="more" append
4. to="more" append 致命缺点，只能点击一次。多次点击重复追加 more

---

5.命名视图

如果一个组件有多个视图<route-view>,来展示多个子组件.这个时候就需要用到命名视图

HTML

JS

{
   path: '/',//路径，输入在网页地址栏
   name: 'hello',//路由名称
   component: {//该路由显示内容模板
     template: `
     <div>
       <h1>首页</h1>
     </div>
     `,
   },
 },
 {
   path: '/user',
   components: {
     'sidebar': {
       template: `
       <div>
         <ul>
           <li>用户列表</li>
           <li>权限管理</li>
         </ul>
       </div>
       `
     },
     'content': {
       template: `
       <div>
       Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam hic officiis eveniet dolorum nobis unde obcaecati consequatur, voluptates deserunt necessitatibus vero placeat amet molestiae ratione eaque animi qui velit atque!
       </div>
       `
     }
   }
 },
 {
   path: '/post',
   components: {
     'sidebar': {
       template: `
       <div>
         <ul>
           <li>贴子列表</li>
           <li>帖子管理</li>
         </ul>
       </div>
       `
     },
     'content': {
       template: `
       <div>
       hello!
       </div>
       `
     }
   }
 }

演示

6.导航钩子

用处： 可以在路由层面进行判断（该访问的访问，该驳回的驳回）；不用再组件层面判断

例子 “未登录时，点击帖子管理跳到登录路由界面”

JS代码

router.beforeEach(function(to, from, next) {
  var logged_in = false;

  if(!logged_in && to.path == '/post') {    // post 指帖子管理路由
    next('/login');    // login 指登录路由
  } else {
    next();
  }
})

每个守卫方法接收三个参数：

• to: Route: 即将要进入的目标 路由对象

• from: Route: 当前导航正要离开的路由对象

• next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

  • next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
  • next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。

  • next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。

  • next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

7.其他

• 元数据
• 路由懒加载
• 滚动行为
• 重定向与别名

借鉴文章
https://juejin.im/post/5b82bcfcf265da4345153343#heading-42
感谢大佬