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

一、路由的安装:

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>


 

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

Vue 学习之 vue-router2的更多相关文章

  1. vue学习之vue基本功能初探

    vue学习之vue基本功能初探: 采用简洁的模板语法将声明式的将数据渲染进 DOM: <div id="app"> {{ message }} </div> ...

  2. vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus

    vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...

  3. Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明-Babel)

    五  Vue学习-vue-cli脚手架学习(创建只选一个选项:Babel) 1. 项目目录说明 node_modules : 包管理文件夹 public : 静态资源 src : 源代码 gitign ...

  4. Vue学习笔记-Vue.js-2.X 学习(五)===>脚手架Vue-CLI(PyCharm)

    Vue项目在pycharm中配置 退出运行: ctrl+c Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明)

  5. Vue学习笔记-Vue.js-2.X 学习(四)===>脚手架Vue-CLI(基本工作和创建)

    (五) 脚手架Vue-CLI 一 Vue-CLI前提(nodejs和webpack) 二  Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nod ...

  6. Vue学习笔记-Vue.js-2.X 学习(三)===>组件化高级

    (四) 组件化高级 1.插槽(slot)的基本使用 A:基本使用: <slot></slot> B:默认置:<slot><h1>中间可以放默认值< ...

  7. Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发

    ===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...

  8. Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习

    一  使用环境: windows 7 64位操作系统 二  IDE:VSCode/PyCharm 三  Vue.js官网: https://cn.vuejs.org/ 四  下载安装引用 方式1:直接 ...

  9. Vue学习之--------Vue中收集表单数据(使用v-model 实现双向数据绑定、代码实现)(2022/7/18)

    文章目录 1.Vue中实现表单数据的收集 1.1 基础知识 1.2 代码实例 1.3 测试效果 1.4 额外插一嘴 1.Vue中实现表单数据的收集 1.1 基础知识 表单中常用的标签:input(输入 ...

  10. vue学习之一vue初识

    一.vue.js是什么 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层 ...

随机推荐

  1. Minimum Cut

    Minimum Cut Time Limit: 3000/2000 MS (Java/Others)    Memory Limit: 65535/102400 K (Java/Others)Tota ...

  2. 2013 AAAI: Uncorrelated Lasso

    Si-Bao Chen, Chris Ding, Bin Luo and Ying Xie. Uncorrelated Lasso. AAAI, 2013. 第一作者是安徽大学陈思宝副教授. 第二作者 ...

  3. 搭建python-flask开发环境

    ubuntu环境 1. 更新系统软件源: 没有通过更新系统软件源的话,可能无法通过apt-get install安装我们需要用到的软件: $ sudo apt-get update $ sudo ap ...

  4. Pandas 50题练习

    f行的age改为1. df.loc['f', 'age'] = 1.5 这样比 df.loc['f']['age'] 好 计算df中每个种类animal的数量 df['animal'].value_c ...

  5. django中间件(获取请求ip)

    def simple_middleware(get_response): # 此处编写的代码仅在Django第一次配置和初始化的时候执行一次. print('1----django启动了') def ...

  6. 转:高效实用的.NET开源项目

    本文转自:http://www.cnblogs.com/pengze0902/p/7669631.html 似乎...很久很久没有写博客了,一直都想写两篇,但是却没有时间写.感觉最近有很多事情需要处理 ...

  7. 时间同步,使用oracle自带的ctss

    crsctl check ctss  --observer mode cluvfy comp clocksync   -检查crss为啥没启用 根据不同版本删除ntp的配置和服务 AIX: stops ...

  8. 006/搭建fabric(二)

    准备vmware虚拟机,并安装完ubuntu系统后.继续搭建fabric运行环境... 0.打开终端,切换root身份.目的:后续操作即可不用sudo... 右键->open Terminal- ...

  9. 解决jQuery的toggle()的自动触发问题

    在1.9以后的版本toggle()就存在这个问题,用之前的版本就正常了 解决办法: 1.去 jquery官网下载一个版本升级文件.http://blog.jquery.com/2013/05/08/j ...

  10. SQL Puzzle

    1. 按条件分块取数据 有表A(CD),数据为 要求:当有CD为0的记录时,取得结果为0, 当表中没有CD=0的记录时,取得的结果为1,2,3(将CD<>0的记录都取出来) 可行SQL脚本 ...