vue2 路由基础 -- 基础使用

@[TOC](vue2路由(一) – 基础使用)

vue 使用 vue-router 插件处理路由，路由是开发单页应用必须掌握的知识。

什么是 vue-router？

（1）vue-router 是 Vue 官方提供前端路由插件，借助它我们实现可以基于路由和组件的单页面应用。

（2）它与传统的页面区别在于：

• 传统的页面应用采用的是后端路由，即通过超链接来实现页面切换和跳转的。
• 而在 vue-router 单页面应用中，则是通过路径之间的切换（实际上就是组件的切换）。

router-link 和 router-view 组件

router-link 是一个 a （链接）标签的封装， router-view 是路由视图，渲染 router-link 匹配到的组件，可配合使用 <transition> 和 <keep-alive> 使用。

更多详细信息

路由配置

动态路由

路由对象为：

{
   
  path: '/argu/:name',
  // 使用 import 动态引入路径对应的组件，起到懒加载的作用
  component: () => import('@/views/ArguPage')
}

可在该路由的 组件 中这样获取 name 的值：

$route.params.name //给同一个组件设置传递不同的params，实现组件的复用

$route 是当前路由，可用 watch 在组件中监它的变化，有一个 params 属性，值一个包含动态路由的对象。

watch: {
   
  '$route'(to) {
   
    console.log(to);
    //将路由的 params 属性赋值给组件的 data 属性
    to.params && to.params.view && (this.effect = to.params.view)
  },
}

嵌套路由

在路由对象中添加一个 children 属性，值是一个数组，可包含多个子路由。 子路由 path 前面不能有 / 。 父级路由对应的组件必须有路由出口，即 router-view。

命名路由

路由对象中的 name 属性是路由的名字，可用该名字指定路径。
在 router-link 的 to 属性 动态绑定 路由对象 。

<router-link :to="{name:'home'}"></router-link>

命名视图

route-view 是路由视图，只有一个视图时，路由匹配的组件在该视图中渲染，多个视图则要对视图进行命名。

<!-- 视图渲染组件,该组件内不需要房子任何内容，可写成只闭合标签-->
<router-view />
<!-- 有多个路由视图需要匹配，则用命名视图 -->
<router-view name="sister"></router-view>
<router-view name="brother