攻克vue路由

先下手

　　路由是个好功能，但是每次都感觉没法开始下手，愣愣的看半天官方文档，所以做个快速开始教程。

　　首先先搭好HTML文件结构：

    <!--link和view在一个父元素下-->
    <div id="aside">
        <ul>
            <!--这里是锚链接-->
            <li>
                <router-link to='/fn1'>111</router-link>
            </li>
            <li>
                <router-link to='/fn2'>222</router-link>
            </li>
        </ul>
        <div id="content">
            <!--这里是路由渲染视图-->
            <router-view></router-view>
        </div>
    </div>

　　然后开始配置JS文件：

//生成一个路由实例
const router = new VueRouter({
    //路径配置
    routes: [
        { path: '/fn1', component: { template: '<div>111</div>' } },
        { path: '/fn2', component: { template: '<div>222</div>' } }
    ]
});
//挂载到对应DOM节点 并传入路由
new Vue({
    el: '#aside',
    router,
})

　　很好，一个简陋的路由搭建完成。

　　

　　前面的都是胡扯，现在开始正常紧急回顾教程！

　　首先来个主线任务。

　　router => .vue => webpack，大概就是这么个样子，vue路由配合.vue单文件组件，单文件组件需要webpack进行loader处理。

　　所以头疼啊，开始一步一步写。

　　服务器配置不需要改，主要是入口JS需要进行处理。

　　首先是main.js，包含vue实例挂载和路由映射配置，反正先暂时写到一起。

//引入一个简单的vue组件
import v from '../vue/index.vue';

//生成一个路由实例
const router = new VueRouter({
    //路径配置
    routes: [
        { path: '/fn1', component: v },
        { path: '/fn2', component: { template: '<div>222</div>' } }
    ]
});

//挂载到对应DOM节点 并传入路由
new Vue({
    el: "#box",
    router
});

 

　　这里面无论是import还是vue组件都是无法识别的，必须要通过babel转。

　　这里放上webpack的配置。

var path = require('path');
var webpack = require('webpack');

module.exports = {
    //入口文件为刚才的main.js
    entry: './static/js/main.js',
    //随便找个地方输出 
    output: {
        path: path.resolve(__dirname, './static'),
        publicPath: '/static/',
        filename: 'main.js'
    },
    module: {
        rules: [
            //处理vue单文件
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            //处理import等语法
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            //暂时用不到
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            }
        ]
    },
    //路径简化
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.common.js',
            'vue-router$': 'vue-router/dist/vue-router.common.js',
        }
    },
    //     devtool: '#eval-source-map'
}

　　大部分是从以前的配置中抄过来的，有些暂时用不上，主要核心内容是babel-loader和vue-loader，并配置相关的入口出口文件。

　　vue文件随便写的

<template>
      <h1>Hello World</h1>
</template>

　　在目录输入webpack指令后，会生成一个js文件，直接引用，可以看到成功了！

Hello World

　　（懒得截图了，反正成功了就是）