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传递的参数值
{{$route.params.newsId}}
{{$route.params.newsTitle}}
在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属性。
            <transition>                <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("/")
                            }
                        }

-----------------------------------------

本文转自xxxpjgl博客51CTO博客

如需转载，请联系作者授权

原文链接：http://blog.51cto.com/9161018/2318997