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. 跳转标签 <router-link>

创建组件Page1

<template>
    <router-link to="/p2">P2</router-link>
</template>

<script>
export default {
  data:{

  }
}

创建组件Page2

<template>
    <div>
        {{ msg }}
    </div>
</template>

<script>
export default {
  data(){
      return {
          msg:'Page2'
      }
  }
}
</script>

4.参数传递

1.根据<router-link> 的to传参

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

<router-link :to="{name:'p2',params:{name:'ray'}}">携带参数name=ray</router-link>

在Page2.vue 加上

{{$route.params.name}}

2.URL传参（restful 风格）

新建UrlParam组件

<template>
  <div>
      {{ name }}
  </div>
</template>

<script>
export default {
    data(){
        return {
            name:'UrlParam 组件页面'
        }
    }
}
</script>

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

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

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

<p>
      <router-link to="/param/ray/18/hello">restful风格传递参数</router-link>
</p>

最后在显示传过来的值

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

最终结果

image.png

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

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

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

5. 子路由

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

创建子路由组件ChildPage

<template>
  <div>
      {{ msg }}
  </div>
</template>

<script>
export default {
    data(){
        return {
            msg:'我是页面1'
        }
    }
}
</script>

在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中加上

<router-link to="/page1/child">跳转到子页面</router-link>

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

 <router-view></router-view>

我们点击跳转到子页面

image.png

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

6.单页面多路由的情况

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

 <router-view ></router-view>
<router-view name="left" style="float:left;width:50%;"></router-view>
<router-view name="right" style="float:right;width:50%;"></router-view>

在路由配置里面再加

{
      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')

vue-router基础知识