vue.jpeg
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:

嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式,在 IE9 中自动降级
自定义的滚动条行为

实际上功能很强大很复杂,我这里记录一些最常用最浅显的例子,帮助初学者学习,具体想要深入请看官方文档。
https://router.vuejs.org/zh/

一 vue-router的基本安装与使用

  1. 安装文件 yarn add vue vue-router
  2. 引入这两个文件 ,先引入vue 再vue-router
  3. 创建一个路由对象 const router = new VueRouter()
  4. 要让Router对象和vm实例关联,在新建的vue实例里面写上router:router,可省略一个router如下
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div class="app">
    {{hello}}
  </div>
  <script src="./node_modules/vue/dist/vue.js"></script>
  <script src="./node_modules/vue-router/dist/vue-router.js"></script>
  <script>
  const router = new VueRouter()
  const vm = new Vue({
    el:'.app',
    router,
    data:{
      hello:'world'
    }
  })
  </script>
</body>
</html>

通过如上操作,再打开页面你就会发现导航栏上多了个#,这就代表路由操作成功
router.png

二 vue-router路由规则配置

在创建路由对象的时候在里面传入一个属性为routers的一个属性,属性值是一个数组,里面包含着每一个路由的规则,并且里面还有path,component等属性,例子如下

routes: [
        // 一个对象就代表了一个路由的规则  route
        // path: 路径  component: 组件
        {path: '/index', component: Index},
        {path: '/login', component: Login},
        {path: '/list', component: List}
      ]

三 路由导航的使用

在vue-router里面提供了两种路由导航

1. 声明式导航

通过<router-link to="/index">首页</router-link>形式,这种类似a标签。

2. 编程式导航

通过编码的方式,类似通过js的方式实现路由的跳转(js中: location.href进行页面的跳转)
实例.$router.push('/index')

四 路由的重定向

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})

五 动态路由

通过:xxx 可以配置一个动态的路由路径,然后通过实例.$route.params.id能拿到xxx的值

 const router = new VueRouter({
      routes: [
        {path: '/product/:id', component: Index},
      ]
    })

六 $route和$route的区别

this.$router是引入的vue-router的一个实例
$router.png
this.$route是当前路由的跳转对象,包含当前路由的name、path、query、params等属性。
$route.png

七 路径中加不加'/'

官方明确说了,path加/代表根路径,不加/表示的是嵌套在上一层下,作为嵌套组件使用。

Last modification:September 19th, 2019 at 03:45 pm
If you think my article is useful to you, please feel free to appreciate