vue-router基础知识

1.安装和引用

npm install vue-router --save-dev (如果在用vue-cli构建项目的时候已经使用安装略过)

引用router

import Vue from 'vue'   //引入Vue
import Router from 'vue-router'  //引入vue-router
Vue.use(Router)  //Vue全局使用Router

2.项目router文件的简单说明

export default new Router({
  routes: [
    {
      path: '/',     //项目的路径
      name: 'Login',   //路由的名称
      component: Login   //路由绑定的组件
    }
  ]
})

3. 跳转标签

创建组件Page1

4.参数传递

1.根据 的to传参

1.我们之前配置路由的时候，有一个name参数，现在派上用场了
在Page1.vue 加上

携带参数name=ray

在Page2.vue 加上

{{$route.params.name}}

2.URL传参（restful 风格）

新建UrlParam组件

在router中的index.js 新增一个配置

{
      path: '/param/:name/:age/:desc',
      component: UrlParam
}

在Page1组件中添加跳转到UrlParam的链接

      restful风格传递参数

最后在显示传过来的值

{{ $route.params.name }}  , {{ $route.params.age }} , {{ $route.params.desc }}

最终结果

image.png

在router配置哪里，path配置的路径可以包含正则表达式

{
      path: '/param/:name/:age(\\d+)/:desc',
      component: UrlParam
}

表明age传参的时候只有数字才可以

5. 子路由

子路由的情况一般用在一个页面有他的基础模版，然后它下面的页面都隶属于这个模版，只是部分改变样式

创建子路由组件ChildPage

在Page1路由配置那里加上children配置

{
  path: '/page1',
  component: Page1,
  name: 'Page1',
  children:[
        {
           path: 'child',
           component: ChildPage,
           name: 'ChildPage' 
        }
    ]
}

不要忘记导入这个ChildPage组件

import ChildPage from '@/components/router-demo/ChildPage'

在Page1组件template中加上

跳转到子页面

关键来了，我们需要用来规定其他组件嵌套进当前组件显示的区域

我们点击跳转到子页面

image.png

证明子页面的内容已经嵌套入page1组件了

6.单页面多路由的情况

实际上我们多数情况下会遇到一个组件中可能需要存在多个
我们再App.vue组件中多加两个

在路由配置里面再加

{
      path: '/moreroute',
      name: 'MoreRoute',
      components:{
        default: HelloWorld,
        left: ChildPage,
        right: ChildPage2
      } 
 }

注意，是components 不是 component
default 表示第一个没命名的视图
最后结果

image.png

7.编程导航（在业务逻辑代码中实现跳转）

相当于浏览器的前进和后退

//后退
this.$router.go(-1)
//前进 
this.$router.go(1)

实现跳转

跳转到/home
2.this.$router.push('/home')