先下手

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

  首先先搭好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

  (懒得截图了,反正成功了就是)

攻克vue路由的更多相关文章

  1. Vue路由vue-router

    前面的话 在Web开发中,路由是指根据URL分配到对应的处理程序.对于大多数单页面应用,都推荐使用官方支持的vue-router.Vue-router通过管理URL,实现URL和组件的对应,以及通过U ...

  2. Vue路由学习心得

    GoodBoy and GoodGirl~进来了就看完点个赞再离开,写了这么多也不容易的~ 一.介绍  1.概念:路由其实就是指向的意思,当我们点击home按钮时,页面中就要显示home的内容,点击l ...

  3. VUE路由新页面打开的方法总结

    平常做单页面的场景比较多,所以大部分的业务是在同一个页面进行跳转.要通过VUE路由使用新页面打开且传递参数,可以采用以下两个方法: 1.router-link的target <router-li ...

  4. vue路由参数变化刷新数据

    当路由到某个组件时,由于组件会复用,所以生命周期函数不会再次执行, 如果这个组件是模板组件,靠传入不同数据来显示的.那么,可能会发生参数变化了但页面数据却不变化. 问题 假如有个组件 info.vue ...

  5. 10.3 Vue 路由系统

     Vue 路由系统  简单示例 main.js  import Vue from 'vue' import App from './App.vue' //https://router.vuejs.or ...

  6. vue路由原理剖析

    单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面, 实现这一点主要是两种方式: 1.Hash: 通过改变hash值 2.History: 利用history对象新特性(详情可出门左拐见:  ...

  7. 3种vue路由传参的基本模式

    路由是连接各个页面的桥梁,而参数在其中扮演者异常重要的角色,在一定意义上,决定着两座桥梁是否能够连接成功. 在vue路由中,支持3中传参方式. 场景,点击父组件的li元素跳转到子组件中,并携带参数,便 ...

  8. 14.vue路由&脚手架

    一.vue路由:https://router.vuejs.org/zh/ 1.定义 let router = new VueRouter({ mode:"history/hash" ...

  9. react router @4 和 vue路由 详解(八)vue路由守卫

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 13.vue路由守卫 a.beforeEach 全局守卫 (每个路由调用前都会触发,根据 ...

随机推荐

  1. 获取OrangePI板子CPU温度

    cat /sys/class/thermal/thermal_zone0/temp 读取这个文件可返回CPU温度,我看网上的说法说是要除以1000才是温度,但我这返回的数字是41...

  2. crypto加密

    /* hash.js */     var crypto = require('crypto'); module.exports = function(){      this.encode = fu ...

  3. TCP/IP(三)数据链路层~2

    一.局域网 1.1.局域网和以太网的区别和联系 局域网:前面已经介绍了,其实就是学校里面.各个大的公司里,自己组件的一个小型网络,这种就属于局域网. 以太网:以太网(Ethernet)指的是由Xero ...

  4. QT_FORWARD_DECLARE_CLASS

    相当于class 类名. 那么他和#include 包含头文件有什么区别呢 首先我们为什么要包括头文件问题的回答很简单通常是我们需要获得某个类型的定义(definition).那么接下来的问题 ...

  5. 【转】Keberos认证原理

    前几天在给人解释Windows是如何通过Kerberos进行Authentication的时候,讲了半天也别把那位老兄讲明白,还差点把自己给绕进去.后来想想原因有以下两点:对于一个没有完全不了解Ker ...

  6. hdu2222 ac自动机入门

    Keywords Search Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  7. CSS中新属性calc()

    CSS3的calc()使用 原文: http://www.w3cplus.com/css3/how-to-use-css3-calc-function.html © w3cplus.com calc( ...

  8. JavaScript 版数据结构与算法(一)栈

    今天,我们要讲的是数据结构与算法中的栈. 栈的简介 栈是什么?栈是一个后进先出(LIFO)的数据结构.栈有啥作用?栈可以模拟算法或生活中的一些后进先出的场景,比如: 十进制转二进制,你需要将余数倒序输 ...

  9. Spring -- 配置bean的三种方法

    配置通过静态工厂方法创建的bean public class StaticBookFactory { //静态工厂方法: public static Book getBook(String bookN ...

  10. Python单元测试框架

    目录 概况 系统要求 使用PyUnit构建自己的测试 安装 测试用例介绍 创建一个简单测试用例 复用设置代码:创建固件 包含多个测试方法的测试用例类 将测试用例聚合成测试套件 嵌套测试用例 测试代码的 ...