先下手

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

  首先先搭好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. Java是如何解析xml文件的(DOM)

    Java解析xml文件 在Java程序中读取xml文件的过程也称为"解析xml文件": 解析的目的: 获取 节点名和节点值 获取 属性名.属性值. 四中解析方式: DOM SAX ...

  2. springmvc03-异常处理-静态文件

    1,一个简单的登录 login.jsp页面 <%@ page language="java" contentType="text/html; charset=UTF ...

  3. 基于CSS UI开源框架汇总

    从16年数据统计就有20几款UI框架出现在市面上,至今为止能统计的框架应该有40款左右了.前端框架都是基于HMTL5.CSS.JS开发的,这里主要给大家聊一下CSS UI开源框架有哪些?以后工作中选择 ...

  4. 西邮linux兴趣小组2014纳新免试题(二)

    [第二关] 题目 http://round2.sinaapp.com/ 分析 打开后,戳进去发现一句名言,然后下一戳的url提示. 在网页源码中得到Page1024提示,于是写一个脚本 #!/bin/ ...

  5. 【京东详情页】——原生js爬坑之标签页

    一.引言 要做详情页的商品评价等5个li的标签页转换,效果如下: 二.实现原理 有一个特别的地方:上面五个li,但下面只有四个容器(table/div). 设计的目的:无论点哪个li,只有前四个div ...

  6. 彻底弄懂AngularJS中的transclusion

    点击查看AngularJS系列目录 彻底弄懂AngularJS中的transclusion AngularJS中指令的重要性是不言而喻的,指令让我们可以创建自己的HTML标记,它将自定义元素变成了一个 ...

  7. 记录各种IE兼容问题,IE6,IE7,IE8,IE9,IE10

     记录遇到的IE BUG:  1.IE8开发者工具打不开 解决办法:IE8新增了开发人员工具,非常不错,比早期的DevToolbar好用多了.不过在我的Win7下 使用的时候偶尔会出现一个莫名其妙的问 ...

  8. Go语言下载、安装、配置、使用

    Go语言 Go语言(Golang,The Go Programming Language),是谷歌2009发布的第二款开源编程语言.2009年7月份,谷歌曾发布了Simple语言,它是用来开发Andr ...

  9. uva 1121 Subsequence

    https://vjudge.net/problem/UVA-1121 题意: 给出一个正整数数列a,要求找出最短的连续的一个序列使得这个序列的所有数字之和大于等于S. 思路: 第一是由于序列都是正整 ...

  10. EnCase missed some usb activities in the evidence files

    My friend is a developer and her colleague May was suspected of stealing the source code of an impor ...