Vue 学习之 vue-router2

Posted 2020-09-26 adash

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

一、路由的安装：

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>

 

实现步骤：

1. npm安装vue-router，引入vue

2. Vue.use(VueRouter)全局安装路由功能

3. 定义路由路径数组routes并创建路由对象router

4. 将路由注入到Vue对象中

5. 在根组件中使用<router-link>定义跳转路径

6. 在根组件中使用<router-view>来渲染组件

7. 创建子组件

三、路由的跳转

（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类名：

1. fade-enter：进入过渡的开始状态，元素被插入时生效，只应用一帧后立即删除；
2. fade-enter-active：进入过渡的结束状态，元素被插入时就生效，在过渡过程完成之后移除；
3. fade-leave：离开过渡的开始状态，元素被删除时触发，只应用一帧后立即删除；
4. 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>

 

实现步骤：

1. npm安装vue-router，引入vue

2. Vue.use(VueRouter)全局安装路由功能

3. 定义路由路径数组routes并创建路由对象router

4. 将路由注入到Vue对象中

5. 在根组件中使用<router-link>定义跳转路径

6. 在根组件中使用<router-view>来渲染组件

7. 创建子组件

三、路由的跳转

（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类名：

1. fade-enter：进入过渡的开始状态，元素被插入时生效，只应用一帧后立即删除；
2. fade-enter-active：进入过渡的结束状态，元素被插入时就生效，在过渡过程完成之后移除；
3. fade-leave：离开过渡的开始状态，元素被删除时触发，只应用一帧后立即删除；
4. 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>

 

 

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