vue-router
xlynn

vue-router

  • 先通过vue-cli生成一个带路由的项目。进入router/index.js
import Vue from 'vue' // 引入vue模块
import VueRouter from 'vue-router' // 引入路由模块
import Home from '../views/Home.vue' // 引入组件，此处相当于对应路由的页面

Vue.use(VueRouter)// 全局应用路由

  const routes = [ // 定义路由匹配规则
  {
    path: '/', // path表示匹配的路由路劲
    name: 'Home',// 对应路由的名称，为命名路由，后续详细说明
    component: Home // 渲染的组件
  },
  {
    path: '/about',
    name: 'About',
    component: () => import( '../views/About.vue') // 此处路由异步加载，也称路由懒加载
  }
]

const router = new VueRouter({// 将定义的路由规则实例化
  mode: 'history',// 选择路由的模式，可以更改为hash路由
  base: process.env.BASE_URL,// 环境
  routes// 路由规则
})

export default router
  • 页面中的使用，先介绍两个标签

<router-link to="/">Home</router-link>
<router-view/>

router-link相当于a标签，用于路由的跳转。router-view则是用于路由渲染模块的容器，细节请看后续内容。

  • 上面已经是个基本的路由和渲染了，但是如果我们需要了解其中的属性，再router-link中：

    • to: 属性，表示要跳转的路由地址，可以接受字符串，通过绑定属性还可以接受对象，对象可以用path表示路径，query表示传递的参数。也可以用name来对应命名路由的名字，params来传递参数。

    路由的配置--Home的

{
   path:'/',
   redirect: '/home'
},
{
   path: '/home',
   name: 'Home',
   component: Home,// 第一层的router-view渲染
   children: [
    {
       path: 'home1',
       name: 'home11',
       component: () => import('../components/homechild1')// Home中的router-view根据路由渲染为home1或者home2，并且path不能跟‘/’,不然表示的是跟路劲，这种又称为嵌套路由，再'/'下面是不会渲染的，可以默认设置重定向为/home1来自动触发。
    },
    {
       path: 'home2',
       name: 'home22',
       component: () => import('../components/homechild2')
    }
  ]
}
组件中使用
home1 // 表示跳转地址为home/home1的路由
home2// 表示跳转name为home22的路由
```

* append:属性，介绍这个钱将<router-link :to="{path: 'home1'}">home1</router-link>如果添加了append属性，发现能跳转到响应的路由，和没有添加没有上面区别，但是再次点击后，路由变成了/home/home1/home1由此可知，该属性是将path的路劲直接拼接到路由中。如果是从home2在点击home1则会是/home/home2/home1，使用to用path的时候，如果子路由没有展开，点击的时候会导致路劲为home/home1，如果点击了:to="{name: 'home22'}"的标签，在切回来就会出现路劲为home/home/home1，解决办法如下，第一种，不使用path，用name代替。第二种，默认进入home的时候展开home/home1，改写:to="{path: 'home/home1'}"为 :to="{path: 'home1'}">。如果不重定向展开home1，点击的时候这样写会导致跳转路劲为/home1。如果点击了home2在点击home1则又会是正常的。
* tag: 表示router-link渲染出来的标签，默认是渲染为a标签。使用该属性可以让router-link渲染渲染为想要的其他标签，同时还是能够存在路由导航的功能，相当于为那个标签添加了点击事件，事件内进行了编程导航。
* replace：不会留下history记录，即不会返回，使用在类似于登录成功，不能再返回登录界面进行登录。
* active-class： 默认为router-link-active，后面可以添加自己想要类名。
* router-link-exact-active:配置当链接被精确匹配的时候应该激活的 class。注意默认值也是可以通过路由构造函数选项 linkExactActiveClass 进行全局配置的。这里子路由就会默认还有该类名父级路由则是router-link-active。

  • router-view：该组件是一个路由渲染的容器，承载的需要渲染的内容，根据嵌套路劲，嵌套渲染组件。

    • name：这个属性十分重要且好用，命名试图，如果想在一个页面中渲染出底部的导航组件，但是又有不含有底部的组件的时候，怎么来区分什么时候渲染底部，什么时候不渲染底部。都放到组件页面内，那么多个页面都需要引入底部，注册，使用。但是使用命名视图后就会十分简单。如下：

    {

path: '/about',
   name: 'About',
   components: {
     default: () => import( '../views/About.vue'),
     footer: () => import( '../components/footer.vue')
  }
}
```

default为默认导出的组件，当视图容器没有标明名称的时候默认使用该组件，name属性值为footer的时候使用footer对应的组件进行导出，同时可以使用两个视图容器来承载默认导出的和footer的组件。
  • 生成实例中用到的属性：

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

  • mode: 配置路由默认，目前vue-cli3.0生成的是history，可以选择的有hash,abstract
    * hash:使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器
    * history:依赖 HTML5 History API 和服务器配置
    * abstract:支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式

    • base:默认为'/'，应用的基路径。

  • $route：包含了当前path(绝对路劲标识)，query、params等，用于读取相关信息或参数。只读属性

  • $router: 包含

    • router.push，跳转的路劲，存在历史记录# router.replace，跳转路劲，不存在历史记录# router.go，页面前进后退# router.back，页面后退一步# router.forward，页面前进一步

  • 下期路由守卫，一定更精彩，欢迎点赞、收藏加关注，哈哈哈哈😄

暂无评论