---恢复内容开始---

一、路由的安装：

npm安装

npm install vue-router --save

执行命令完成vue-router的安装，并在package.json中添加了vue-router的依赖。

注：若从GitHub或他人的项目，安装项目时只需要执行npm install即可下载并完成安装该项目所有的依赖。

package.json

  "dependencies": {

    ...

    "vue-router": "^2.1.1"

    ...

  },

如果是要安装在开发环境下，则使用以下命令行：

npm install vue-router --save-dev

package.json

  "devDependencies": {

    ...

    "vue-router": "^2.1.1",

    ...

  },

二、路由实例（demo）
下面是官网demo

Html

<!-- 引入vue与vue-router -->

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

App.vue

<div id="app">

  <h1>Hello App!</h1>

  <p>

    <!-- 使用 router-link 组件来导航. -->

    <!-- 通过传入 `to` 属性指定链接. -->

    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->

    <router-link to="/foo">Go to Foo</router-link>

    <router-link to="/bar">Go to Bar</router-link>

  </p>

  <!-- 路由出口 -->

  <!-- 路由匹配到的组件将渲染在这里 -->

  <router-view></router-view>

</div>

JavaScript

main.js

// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)

import Vue from 'vue'

import VueRouter from 'vue-router'

Vue.use(VueRouter)

// 1. 定义（路由）组件

const Foo = { template: '<div>foo</div>' }

const Bar = { template: '<div>bar</div>' }

//组件也可引入

import Foo from './components/foo'

import Bar from './components/bar'

// 2. 定义路由

// 每个路由应该映射一个组件。 其中"component" 可以是

// 通过 Vue.extend() 创建的组件构造器，

// 或者，只是一个组件配置对象。

const routes = [

  { path: '/foo', component: Foo },

  { path: '/bar', component: Bar }

]

// 3. 创建 router 实例，然后传 `routes` 配置

// 还可传别的配置参数

const router = new VueRouter({

  routes // （缩写）相当于 routes: routes

})

// 4. 创建和挂载根实例。

// 记得要通过 router 配置参数注入路由，

// 从而让整个应用都有路由功能

const app = new Vue({

  router

}).$mount('#app')

//还可

const app = new Vue({

  el:'#app',

  router

})

// 现在，应用已经启动了！

Foo.vue

<template>

  <div>

    <h1>Foo</h1>

  </div>

</template>

Bar.vue

<template>

  <div>

    <h1>Bar</h1>

  </div>

</template>

实现步骤：

npm安装vue-router，引入vue
Vue.use(VueRouter)全局安装路由功能
定义路由路径数组routes并创建路由对象router
将路由注入到Vue对象中
在根组件中使用<router-link>定义跳转路径
在根组件中使用<router-view>来渲染组件
创建子组件

三、路由的跳转

（1）router-link

router-link是一个组件，默认被渲染成一个带有链接的a标签，通过to属性指定链接地址。
注意：被选中的router-link将自动添加一个class属性值 .router-link-active

router-link 属性

1、to

这是一个必须设置的属性，否则路由无法生效。它表示路由的链接，可以是一个字符串也可以是一个描述目标位置的对象。

<!-- 字符串 -->

<router-link to="home">Home</router-link>

<!-- 渲染结果同上    使用 v-bind 的 JS 表达式 -->

<router-link v-bind:to="'home'">Home</router-link>

<!-- 渲染结果同上   不写 v-bind 也可以，就像绑定别的属性一样 -->

<router-link :to="'home'">Home</router-link>

<!-- 渲染结果同上 -->

<router-link :to="{ path: 'home' }">Home</router-link>

<!-- 命名的路由 -->

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

// 此时路由如下定义，name也可为中文

const routes = [

  { path: '/user', component: user, name: 'user' }

];

<!-- 带查询参数，下面的结果为 /register?plan=private -->

<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

2、replace

一个布尔类型，默认为false。如果replace设置为true，那么导航不会留下history记录，点击浏览器回退按钮不会再回到这个路由。

<router-link to="goods" replace></router-link>

3、tag

router-link默认渲染成a标签，也有方法让它渲染成其他标签，tag属性就用来设置router-link渲染成什么标签的。

<!-- 渲染成li标签 -->

<router-link to="goods" tag="li"></router-link>

4、active-class

上面说了被选中的router-link将自动添加一个class属性值.router-link-active，这个属性就是来修改这个class值的。

<!-- 改变router-link的active时的classname -->

<router-link to="goods" active-class="router-active'></router-link>

（2）router-view

作用：用来渲染匹配到的路由
属性：name 命名路由展示多个同级视图。在界面中拥有多个单独命名的视图，而不是只有一个单独的出口

//同个路由，多个视图就需要多个组件

<router-view class="view one"></router-view>

<router-view class="view two" name="a"></router-view>

<router-view class="view three" name="b"></router-view>

const router = new VueRouter({

  routes: [

    {

      path: '/',

      components: {

        default: Foo, //router-view 没有设置名字，那么默认为 default

        a: Bar,

        b: Baz

      }

    }

  ]

})

行为表现：transition过渡，具体用法见Vue2.0 Transition常见用法全解惑。

还可配合<keep-alive>使用

1) transition

Vue只有在插入，更新或者移除DOM元素时才会应用过渡效果，transition过渡效果的应用可以通过不同方式实现

关键点：

demo

<!-- 首先将要过渡的元素用transition包裹，并设置过渡的name，然后添加触发这个元素过渡的按钮（实际项目中不一定是按钮，任何能触发过渡组件的DOM操作的操作都可以） -->

<div>

  <button @click="show=!show">show</button>

  <transition name="fade">

    <p v-show="show">hello</p>

  </transition>

</div>

<style>

    // 接着为过渡类名添加规则

    .fade-enter-active, .fade-leave-active{

      transition: all 0.5s ease

    }

    .fade-enter, .fade-leave-active{

      opacity: 0

    }

</style>

CSS过渡类名

组件过渡过程中，会有四个CSS类名进行切换，这四个类名与上面transition的name属性有关，比如name=”fade”，会有如下四个CSS类名：

fade-enter：进入过渡的开始状态，元素被插入时生效，只应用一帧后立即删除；
fade-enter-active：进入过渡的结束状态，元素被插入时就生效，在过渡过程完成之后移除；
fade-leave：离开过渡的开始状态，元素被删除时触发，只应用一帧后立即删除；
fade-leave-active：离开过渡的结束状态，元素被删除时生效，离开过渡完成之后被删除；

从上面四个类名可以看出，fade-enter-active和fade-leave-active在整个进入或离开过程中都有效，所以CSS的transition属性在这两个类下进行设置。
fade-enter和fade-leave-active类设置过渡刚进入和离开的时候属性样式。（当然还可以设置其他的CSS属性，transform属性是除了opacity之外经常在这里被用到的）

2) keep-alive

作用：缓存数据。重新渲染路由组件的时候，之前那个路由组件的数据将被清除。（比如对当前的路由组件a进行了一些DOM操作之后，点击进入另一个路由组件b，再回到路由组件a的时候之前的DOM操作还保存在，如果不加keep-alive再回到路由组件a时，之前的DOM操作就没有了，得重新进行。）

<transition>

  <keep-alive>

    <router-view></router-view>

  </keep-alive>

</transition>

---恢复内容结束---

---恢复内容开始---

一、路由的安装：

npm安装

npm install vue-router --save

执行命令完成vue-router的安装，并在package.json中添加了vue-router的依赖。

注：若从GitHub或他人的项目，安装项目时只需要执行npm install即可下载并完成安装该项目所有的依赖。

package.json

  "dependencies": {

    ...

    "vue-router": "^2.1.1"

    ...

  },

如果是要安装在开发环境下，则使用以下命令行：

npm install vue-router --save-dev

package.json

  "devDependencies": {

    ...

    "vue-router": "^2.1.1",

    ...

  },

二、路由实例（demo）
下面是官网demo

Html

<!-- 引入vue与vue-router -->

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

App.vue

<div id="app">

  <h1>Hello App!</h1>

  <p>

    <!-- 使用 router-link 组件来导航. -->

    <!-- 通过传入 `to` 属性指定链接. -->

    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->

    <router-link to="/foo">Go to Foo</router-link>

    <router-link to="/bar">Go to Bar</router-link>

  </p>

  <!-- 路由出口 -->

  <!-- 路由匹配到的组件将渲染在这里 -->

  <router-view></router-view>

</div>

JavaScript

main.js

// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)

import Vue from 'vue'

import VueRouter from 'vue-router'

Vue.use(VueRouter)

// 1. 定义（路由）组件

const Foo = { template: '<div>foo</div>' }

const Bar = { template: '<div>bar</div>' }

//组件也可引入

import Foo from './components/foo'

import Bar from './components/bar'

// 2. 定义路由

// 每个路由应该映射一个组件。 其中"component" 可以是

// 通过 Vue.extend() 创建的组件构造器，

// 或者，只是一个组件配置对象。

const routes = [

  { path: '/foo', component: Foo },

  { path: '/bar', component: Bar }

]

// 3. 创建 router 实例，然后传 `routes` 配置

// 还可传别的配置参数

const router = new VueRouter({

  routes // （缩写）相当于 routes: routes

})

// 4. 创建和挂载根实例。

// 记得要通过 router 配置参数注入路由，

// 从而让整个应用都有路由功能

const app = new Vue({

  router

}).$mount('#app')

//还可

const app = new Vue({

  el:'#app',

  router

})

// 现在，应用已经启动了！

Foo.vue

<template>

  <div>

    <h1>Foo</h1>

  </div>

</template>

Bar.vue

<template>

  <div>

    <h1>Bar</h1>

  </div>

</template>

实现步骤：

npm安装vue-router，引入vue
Vue.use(VueRouter)全局安装路由功能
定义路由路径数组routes并创建路由对象router
将路由注入到Vue对象中
在根组件中使用<router-link>定义跳转路径
在根组件中使用<router-view>来渲染组件
创建子组件

三、路由的跳转

（1）router-link

router-link 属性

1、to

这是一个必须设置的属性，否则路由无法生效。它表示路由的链接，可以是一个字符串也可以是一个描述目标位置的对象。

<!-- 字符串 -->

<router-link to="home">Home</router-link>

<!-- 渲染结果同上    使用 v-bind 的 JS 表达式 -->

<router-link v-bind:to="'home'">Home</router-link>

<!-- 渲染结果同上   不写 v-bind 也可以，就像绑定别的属性一样 -->

<router-link :to="'home'">Home</router-link>

<!-- 渲染结果同上 -->

<router-link :to="{ path: 'home' }">Home</router-link>

<!-- 命名的路由 -->

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

// 此时路由如下定义，name也可为中文

const routes = [

  { path: '/user', component: user, name: 'user' }

];

<!-- 带查询参数，下面的结果为 /register?plan=private -->

<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

2、replace

一个布尔类型，默认为false。如果replace设置为true，那么导航不会留下history记录，点击浏览器回退按钮不会再回到这个路由。

<router-link to="goods" replace></router-link>

3、tag

router-link默认渲染成a标签，也有方法让它渲染成其他标签，tag属性就用来设置router-link渲染成什么标签的。

<!-- 渲染成li标签 -->

<router-link to="goods" tag="li"></router-link>

4、active-class

上面说了被选中的router-link将自动添加一个class属性值.router-link-active，这个属性就是来修改这个class值的。

<!-- 改变router-link的active时的classname -->

<router-link to="goods" active-class="router-active'></router-link>

（2）router-view

作用：用来渲染匹配到的路由
属性：name 命名路由展示多个同级视图。在界面中拥有多个单独命名的视图，而不是只有一个单独的出口

//同个路由，多个视图就需要多个组件

<router-view class="view one"></router-view>

<router-view class="view two" name="a"></router-view>

<router-view class="view three" name="b"></router-view>

const router = new VueRouter({

  routes: [

    {

      path: '/',

      components: {

        default: Foo, //router-view 没有设置名字，那么默认为 default

        a: Bar,

        b: Baz

      }

    }

  ]

})

行为表现：transition过渡，具体用法见Vue2.0 Transition常见用法全解惑。

还可配合<keep-alive>使用

1) transition

Vue只有在插入，更新或者移除DOM元素时才会应用过渡效果，transition过渡效果的应用可以通过不同方式实现

关键点：

demo

<!-- 首先将要过渡的元素用transition包裹，并设置过渡的name，然后添加触发这个元素过渡的按钮（实际项目中不一定是按钮，任何能触发过渡组件的DOM操作的操作都可以） -->

<div>

  <button @click="show=!show">show</button>

  <transition name="fade">

    <p v-show="show">hello</p>

  </transition>

</div>

<style>

    // 接着为过渡类名添加规则

    .fade-enter-active, .fade-leave-active{

      transition: all 0.5s ease

    }

    .fade-enter, .fade-leave-active{

      opacity: 0

    }

</style>

CSS过渡类名

组件过渡过程中，会有四个CSS类名进行切换，这四个类名与上面transition的name属性有关，比如name=”fade”，会有如下四个CSS类名：

fade-enter：进入过渡的开始状态，元素被插入时生效，只应用一帧后立即删除；
fade-enter-active：进入过渡的结束状态，元素被插入时就生效，在过渡过程完成之后移除；
fade-leave：离开过渡的开始状态，元素被删除时触发，只应用一帧后立即删除；
fade-leave-active：离开过渡的结束状态，元素被删除时生效，离开过渡完成之后被删除；

2) keep-alive

<transition>

  <keep-alive>

    <router-view></router-view>

  </keep-alive>

</transition>

---恢复内容结束---

巴特西

Vue 学习之 vue-router2

一、路由的安装：

npm安装

三、路由的跳转

（2）router-view

CSS过渡类名

一、路由的安装：

npm安装

三、路由的跳转

（2）router-view

CSS过渡类名

最新文章

热门文章