Vue 前端路由 vue-router

1、前端路由

后端路由：多页面，服务器端渲染好返回给浏览器。

前端路由：改变url不向服务器发送请求；前端可以监听url变化；前端可以解析url并执行相应操作。

前后端分离：后端只提供API来返回数据，前端通过ajax获取数据后，在通过一定的方式渲染到页面上。

SPA：前后端分离+前端路由。

SPA只有一个html文件，整个网站的所有内容都在这一个html里，通过js来处理。

2、vue-router

路由不同的页面实时上就是加载不同的组件。

3、示例

github地址：https://github.com/MengFangui/VueRouter

需要安装vue-router

（1）加载插件

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './app.vue';
//加载vue-router插件
Vue.use(VueRouter);

注意：from后的模块都是小写。

（2）路由设置

// 路由配置,配置路由匹配列表
//webpack会把每一个路由打包为一个js文件，在请求该页面时，加载这个页面的js，异步实现懒加载（按需加载）
const Routers = [
    {
        //匹配的路径
        path: '/index',
        //
        meta: {
            title: '首页'
        },
        //映射的组件
        component: (resolve) => require(['./views/index.vue'], resolve)
    },
    {
        path: '/about',
        meta: {
            title: '关于'
        },
        component: (resolve) => require(['./views/about.vue'], resolve)
    },
    {
        //路由到同一个页面，数据不同
        path: '/user/:id',
        meta: {
            title: '个人主页'
        },
        component: (resolve) => require(['./views/user.vue'], resolve)
    },
    //访问的路径不存在时，重定向到首页。
    {
        path: '*',
        redirect: '/index'
    }
];
const RouterConfig = {
    // 使用 HTML5 的 History 路由模式，通过‘/’设置路径
    mode: 'history',
    routes: Routers
};
const router = new VueRouter(RouterConfig);

注意：path属性值后有'/'.

component: (resolve) => require(['./views/user.vue'], resolve)

resolve实现异步加载，按需加载。

命名路由使用：

{
        //匹配的路径
        path: '/index',
        //常量参数定义
        meta: {
            title: '首页'
        },
        //命名路由
        name:'index',
        //映射的组件
        component: (resolve) => require(['./views/index.vue'], resolve)
    }

<router-link :to="{name:'about'}">跳转到 about</router-link>

命名路由的配置好处是：路径都在main.js中配置好了，改变路径的话只需要在main.js中配置即可，不需要在所有使用的地方进行配置。

（3）将将每个页面的样式都打包到一个css文件，webpack.config.js

plugins: [
        //css单独打
        new ExtractTextPlugin({
            filename: '[name].css',
            //将每个页面的样式都打包到一个css文件
            allChunks: true
        })
    ]

（4）配置webpack-dev-server支持history路由

"scripts": {
     "dev": "webpack-dev-server --open --history-api-fallback --config webpack.config.js",
    "bulid": "webpack --progress --hide-modules --config webpack.prod.config.js"
  },

--history-api-fallback  所有的路由都指向index.html

（5）挂载路由组件

<template>
    <div>
        <router-view></router-view>
    </div>
</template>
<script>
    export default {

    }
</script>

（6）跳转

方式1：

<template>
    <div>
        <h1>首页</h1>
        <!--router-link会渲染为一个a标签 实现跳转的方式1-->
        <!--router-link 的tag属性 指定渲染成什么标签-->
        <!--router-link 的replace属性 不会留下history记录，不能使用后退键-->
        <!--router-link 的active-class属性 路由匹配成功时会自动给当前元素设置为一个名为router-link-active的class-->
        <router-link to="/about">跳转到 about</router-link>
    </div>
</template>
<script>
    export default {

    }
</script>

to是一个属性，同样可以使用v-bind进行动态设置。如：

<router-link :to="{name:'about'}">跳转到 about</router-link>

方法二：

<template>
    <div>
        <h1>介绍页</h1>
        <button @click="handleRouter">跳转到 user</button>
    </div>
</template>
<script>
    export default {
        methods: {
            handleRouter () {
                //实现跳转的方式2
                this.$router.push('/user/123');
                //不会向history添加新纪录
                //this.$router.replace('/user/123');
                //在hsitory中前进或者后退多少步
                this.$router.go(-1);
            }
        }
    }
</script>

（7）导航钩子

//导航钩子，beforeEach路由改变前触发
//to形参 即将进入的路由对象
//from 即将离开的路由对象
//next 调用改方法后才能进入下一个钩子，设置为false时，可以取消导航，设置为具体路径时可以导航到指定的页面next(‘/login’)

 router.beforeEach((to, from, next) => { window.document.title = to.meta.title; next(); }); 

//导航钩子，afterEach路由改变后触发

 router.afterEach((to, from, next) => { window.scrollTo(0, 0); });

 next(false):next的参数设置为false时，取消导航/跳转效果。

 （8）虚拟DOM

new Vue({
    el: '#app',
    router: router11,
    render: h => {
        return h(App)
    }
});

注意：Vue 在创建 Vue 实例时，通过调用 render 方法来渲染实例的 DOM 树。

h就是createElement,只是换了一个名称。

Vue 在调用 render 方法时，会传入一个 createElement 函数作为参数，也就是这里的 h 的实参是 createElement 函数，然后 createElement 会以 APP 为参数进行调用

（9）Vue组件需要一个标签进行包裹（如div）

<template>
    <div>
        <h1>首页</h1>
        <!--router-link会渲染为一个a标签 实现跳转的方式1-->
        <!--router-link 的tag属性 指定渲染成什么标签-->
        <!--router-link 的replace属性 不会留下history记录，不能使用后退键-->
        <!--router-link 的active-class属性 路由匹配成功时会自动给当前元素设置为一个名为router-link-active的class-->
        <router-link to="/about">跳转到 about</router-link>
    </div>
</template>