vue-router

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,页面前进一步

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

暂无评论