首页 > 代码库 > Vue 学习之 vue-router2

Vue 学习之 vue-router2

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

一、路由的安装:

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-activefade-leave-active在整个进入或离开过程中都有效,所以CSS的transition属性在这两个类下进行设置。
fade-enterfade-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-activefade-leave-active在整个进入或离开过程中都有效,所以CSS的transition属性在这两个类下进行设置。
fade-enterfade-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>

 



 

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

Vue 学习之 vue-router2