【Vue2.0学习】—路由（六十五）

【Vue2.0学习】—路由（六十五）

一、路由

• 理解：一个路由（route）就是一组映射关系，多个路由需要路由器进行管理
• 前端路由：key是路径， value是组件

二、基本使用

• 安装vue-router，命令：npm i vue-router
• 应用插件：Vue.use(VueRouter）
• 编写router配置项

//该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
import Home from '../components/Home.vue'
import About from '../components/About.vue'

//创建并暴露路由
export default new VueRouter({
    routes: [{
        path: '/about',
        component: About

    }, {
        path: '/home',
        component: Home
    }]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

• 实现切换：active-class可配置高亮显示

• 指定展示的位置：

Demo演示：

<template>
   <div>
    <div class="row">
      <div class="col-xs-offset-2 col-xs-8">
        <div class="page-header"><h2>Vue Router Demo</h2></div>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-2 col-xs-offset-2">
        <div class="list-group">
            <!-- Vue中借助router-link实现标标签的跳转 -->
          <router-link class="list-group-item" to="/about" active-class="active">About</router-link>
          <router-link class="list-group-item" to="/home"  active-class="active">Home</router-link>

        </div>
      </div>
      <div class="col-xs-6">
        <div class="panel">
          <div class="panel-body">
            <!-- 指定组件呈现的位置 -->
            <router-view></router-view>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    import Home from './components/Home.vue'
    import About from './components/About.vue'
    export default {
        name: 'App',
        components: {
            Home,
            About
        }

    }
</script>

<style>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

//该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
import Home from '../components/Home.vue'
import About from '../components/About.vue'

//创建并暴露路由
export default new VueRouter({
    routes: [{
        path: '/about',
        component: About

    }, {
        path: '/home',
        component: Home
    }]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

//该文件是整个项目的入口文件

//引入Vue
import Vue from 'vue'
//引入APP组件，它是所有组件的父组件
import App from './App.vue'

//引入VueRouter
import VueRouter from 'vue-router'

//引入路由器
import router from './router'
// 关闭Vue生产提示
Vue.config.productionTip = false

Vue.use(VueRouter)


//将APP组件放入容器中
new Vue({
    render: h => h(App),
    router
}).$mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

三、几个注意点

• 路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹。
• 通过切换，隐藏了路由组件，默认是被销毁的，需要的时候再去挂载。
• 每个组件都有自己的$route属性，里面存储着自己的路由信息。
• 整个应用只有一个router,可以通过组件的$router属性获取到。

四、嵌套（多级）路由

跳转(要写完整的路径）：

 <router-link class="list-group-item active" active-class="active" to="/home/message">Message</router-link>
1

五、路由传参

六、路由命名

作用：简化路由的跳转

如何使用？

简化跳转

七、路由的params参数

传递参数

注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用 name配置。

接收参数：

$route.params.id
1

$route.params.title
1

八、的replace属性

• 作用：控制路由跳转时操作浏览历史记录的模式

• 浏览器的历史记录有两种写入方式：分别是push和replace，push是追加历史记录，replace是替换当前记录，路由跳转的时候默认为push

• 如何开始replace模式：News