vue-router笔记-原创手记-慕课网

1、安装vue-cli脚手架

a.下载安装node.js，随包同时也安装了npm;

b.安装vue-cli：npm install vue-cli -g; //全局安装，只需要安装一次，以后新建其他的项目不用安装了

c.vue init webpack demo //初始化项目，注意是vue init，而不是npm init(这个是创建package.json文件的)

先要进入我们项目的安装目录，然后执行下面的操作

d.nmp install //安装项目依赖包，也就是安装package.json里的包

e.npm run dev //开发模式下运行我们的程序。给我们自动构建了开发用的服务器环境和在浏览器中打开，并实时监视我们的代码更改，即时呈现给我们。

f.npm run build //发布文件，项目根目录生成了dist文件夹，这个文件夹里边就是我们要传到服务器上的文件。

2、vue-router：SPA（单页应用）的路径管理器

src/router/index.js，是路由的核心文件，这里面配置路由参数：

引入新增加的路由文件：import Hello from '@/components/Hi'

配置路由名称Hi、路径`/Hi`和对应的组件模板

在src/components目录下，新建 Hi.vue 文件，文件包括三部分：<template><script>和<style>

以上配置完成之后，可以在url栏修改url即可实现页面的切换

一层路径(/xxx)对应一个router-view

比如url: /a/b/c (假设a、b、c都为正常路径，不会作为参数)

那/a对应的就是App.vue中的router-view，/a进入a.vue这个组件中

那/a/b对应的就是a.vue中的router-view， /a/b进入b.vue这个组件中

<router-view/>显示模板文件(xx.vue文件)里面的内容

import Hi1 from '@/components/Hi1'

{

path:'/hi1', //path值是自定义的，和app.vue里的router-link的to的值一样

component:Hi1 //component的值就是import引入的组件名称，和组件名称名字一样

}

3、router-link：制作导航栏

写在src/App.vue文件中的template里

<router-link to="/">[显示字段]</router-link>，如：

<p>导航：

<router-link to="/">首页</router-link>

<router-link to="/hi">Hi页面</router-link>

</p>

4、vue-router配置子路由

子路由的情况一般用在一个页面有他的基础模版，然后它下面的页面都隶属于这个模版，只是部分改变样式。

步骤和2相同，不同之处在于配置路由参数，在原有的路由配置下加入children字段

如：Hi1页面隶属于Hi页面

{

path:'/hi',

component:Hi,

children:[

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

{path:'hi1',name: 'Hi1',component:Hi1}

//path值可以自定义，不必和组件名一样，name值可以不写，component的值就是组件名称

]

}

5、vue-router参数传递

a.使用to属性传递

使用router-link中的to属性进行传参，这时候的to必须使用绑定形式，即：:to

router-link 定义点击后导航到哪个路径下

<router-link :to="{name:'子路由的name值',params:{key:value}}"></router-link>

name：就是我们在路由配置文件中起的name值。

params：就是我们要传的参数，它也是对象形式，在对象里可以传递多个值。

接受参数值

在模板文件里面接收(路由文件模板)，如src/compontnes/Hi1.vue用{{$route.params.key}}

b.使用url进行参数传递

在路由/src/router/index.js配置路由里面进行操作，以:冒号的形式传递参数。

{

path:"/params/:newsId/:newsTitle",//表示需要传递的参数是什么

component:Params

}

在Params.vue组件(页面)里面输出，url传递的参数值

在App.vue文件里面，加上我们要传递过去的值

<router-link to="/params/198/i am newsTitle">params</router-link>

6、单页面多路由区域操作

<router-view/>显示模板文件(xx.vue文件)里面的内容，对应的组件内容渲染到router-view中

router-link 和router-view 标签一一对应，成对出现，router-view只出现在app.vue里面，components里面的组件都不需要加router-link 和router-view

配置使得一个页面里面有2个以上<router-view>区域

a。src/App.vue里面配置<router-view>，需要几个区域就写上几个<router-view>标签

<router-view name="right"></router-view> //name对应components里面的值

b。在router/index.js路由配置文件里面，引入对应的路由区域文件模板，如import Hi1 from '@/components/Hi1'

c。配置需要在components字段里进行(注意多个router-view就是components了，加个s)。如：

{

path: '/Hi',

components: {

default:Hello,

left:Hi2,

right:Hi1

}

7、vue-router 的重定向-redirect

a.在src/App.vue里面新添加导航

<router-link to="/goHome">goHome</router-link>

b.在router/index.js路由配置文件里面，不需要引入路由模板了，因为是重定向

{

path:'/goHome', //表示要跳转到哪里

redirect:'/' //重定向到首页,这里不需要component了

}

***重定向的时候同时传递参数

a.在src/App.vue里面新添加导航

<router-link to="/goParams">goParams</router-link> //这里面的goParams和路由里面的path值是一样的

b.在router/index.js路由配置文件里面

{

path:'/goParams/:id/:title',

redirect:'/params/:id/:title' //跳转的路径

}

8、alias别名：也可以实现类似重定向的效果

<router-link to="/xiao">xiao</router-link> //这里面的xiao和路由里面的alias值是一样的

{

path:'/Hi1' //需要重定向到的页面

component:Hi1 //该页面对应的组件

alias:'/xiao' //自己取的别名

}

redirect和alias的区别

redirect：仔细观察URL，redirect是直接改变了url的值，把url变成了重定向的页面的path路径。

alias：URL路径没有改变，更友好，让用户知道自己访问的路径，只是改变了<router-view>中的内容。

填坑：别名alias请不要用在path为’/’中，如下代码的别名是不起作用的。

{

path: '/',

component: Hello,

alias:'/home'

}

9、路由的过渡动画

想让路由有过渡动画，需要在<router-view>标签的外部添加<transition>标签，标签还需要一个name属性。

<router-view name="fade" mode="out-in"></router-view>

</transition>

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属性在这两个类下进行设置。

**过渡模式mode**：

**in-out**:新元素先进入过渡，完成之后当前元素过渡离开。

**out-in**:当前元素先进行过渡离开，离开完成后新元素过渡进入。--------这种模式好

10、mode作用

此mode不是上面的过度动画里面的mode，在export default new Router({})里面设置

export default new Router({

mode:history',

routes:[

{

}

]

})

mode的两个值

histroy:当你使用 history 模式时，URL 就像正常的 url，例如 http://jsapng.com/lms/，也好看！不带#

hash:默认’hash’值，但是hash看起来就像无意义的字符排列，不太好看也不符合我们一般的网址浏览习惯。

11、404页面设置

和设置子路由一样方式，只不过在path里面，值改为*

12、路由中的钩子

a.路由配置文件中的钩子函数

我们可以直接在路由配置文件（/src/router/index.js）中写钩子函数。但是在路由文件中我们只能写一个beforeEnter,就是在进入此路由配置时。

这是一个函数，有三个参数from对象、to对象、next()函数——一个开关，是否跳转到目标页面

from对象：路径跳转前的路径信息，也是一个对象的形式。表示是从哪个页面进入到本页面

to对象：路由将要跳转的路径信息，信息是包含在对像里边的。表示要进入的页面是哪个

next()：路由的控制参数，常用的有next(true)和next(false)。一个开关，表示是否进行跳转到目标页面

next()一定要写上，否则就是没开开关，禁止跳转了

默认是next()：可以跳转，加参数就是：

next(true)：可以跳转

next(false)：不可以跳转

b.写在模板中的钩子函数：有两个钩子函数可以使用

beforeRouteEnter：在路由进入前的钩子函数

beforeRouteLeave：在路由离开前的钩子函数

可以监控到路由的进入和路由的离开，也可以轻易的读出to和from的值。

beforeRouteEnter:(from,to,next)=>{

//do something

}

beforeRouteLeave:(from,to,next)=>{

//do something

}

13、编程式导航

不在html代码中使用router-link进行页面跳转，而是在js代码(业务逻辑)里面进行页面跳转

methods:{

goBack(){

this.$router.go(-1);

goForward(){

this.$router.go(1);

goHome(){

this.$router.push("/")

}