攻克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
(懒得截图了,反正成功了就是)
攻克vue路由的更多相关文章
- Vue路由vue-router
前面的话 在Web开发中,路由是指根据URL分配到对应的处理程序.对于大多数单页面应用,都推荐使用官方支持的vue-router.Vue-router通过管理URL,实现URL和组件的对应,以及通过U ...
- Vue路由学习心得
GoodBoy and GoodGirl~进来了就看完点个赞再离开,写了这么多也不容易的~ 一.介绍 1.概念:路由其实就是指向的意思,当我们点击home按钮时,页面中就要显示home的内容,点击l ...
- VUE路由新页面打开的方法总结
平常做单页面的场景比较多,所以大部分的业务是在同一个页面进行跳转.要通过VUE路由使用新页面打开且传递参数,可以采用以下两个方法: 1.router-link的target <router-li ...
- vue路由参数变化刷新数据
当路由到某个组件时,由于组件会复用,所以生命周期函数不会再次执行, 如果这个组件是模板组件,靠传入不同数据来显示的.那么,可能会发生参数变化了但页面数据却不变化. 问题 假如有个组件 info.vue ...
- 10.3 Vue 路由系统
Vue 路由系统 简单示例 main.js import Vue from 'vue' import App from './App.vue' //https://router.vuejs.or ...
- vue路由原理剖析
单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面, 实现这一点主要是两种方式: 1.Hash: 通过改变hash值 2.History: 利用history对象新特性(详情可出门左拐见: ...
- 3种vue路由传参的基本模式
路由是连接各个页面的桥梁,而参数在其中扮演者异常重要的角色,在一定意义上,决定着两座桥梁是否能够连接成功. 在vue路由中,支持3中传参方式. 场景,点击父组件的li元素跳转到子组件中,并携带参数,便 ...
- 14.vue路由&脚手架
一.vue路由:https://router.vuejs.org/zh/ 1.定义 let router = new VueRouter({ mode:"history/hash" ...
- react router @4 和 vue路由 详解(八)vue路由守卫
完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 13.vue路由守卫 a.beforeEach 全局守卫 (每个路由调用前都会触发,根据 ...
随机推荐
- 获取OrangePI板子CPU温度
cat /sys/class/thermal/thermal_zone0/temp 读取这个文件可返回CPU温度,我看网上的说法说是要除以1000才是温度,但我这返回的数字是41...
- crypto加密
/* hash.js */ var crypto = require('crypto'); module.exports = function(){ this.encode = fu ...
- TCP/IP(三)数据链路层~2
一.局域网 1.1.局域网和以太网的区别和联系 局域网:前面已经介绍了,其实就是学校里面.各个大的公司里,自己组件的一个小型网络,这种就属于局域网. 以太网:以太网(Ethernet)指的是由Xero ...
- QT_FORWARD_DECLARE_CLASS
相当于class 类名. 那么他和#include 包含头文件有什么区别呢 首先我们为什么要包括头文件问题的回答很简单通常是我们需要获得某个类型的定义(definition).那么接下来的问题 ...
- 【转】Keberos认证原理
前几天在给人解释Windows是如何通过Kerberos进行Authentication的时候,讲了半天也别把那位老兄讲明白,还差点把自己给绕进去.后来想想原因有以下两点:对于一个没有完全不了解Ker ...
- hdu2222 ac自动机入门
Keywords Search Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...
- CSS中新属性calc()
CSS3的calc()使用 原文: http://www.w3cplus.com/css3/how-to-use-css3-calc-function.html © w3cplus.com calc( ...
- JavaScript 版数据结构与算法(一)栈
今天,我们要讲的是数据结构与算法中的栈. 栈的简介 栈是什么?栈是一个后进先出(LIFO)的数据结构.栈有啥作用?栈可以模拟算法或生活中的一些后进先出的场景,比如: 十进制转二进制,你需要将余数倒序输 ...
- Spring -- 配置bean的三种方法
配置通过静态工厂方法创建的bean public class StaticBookFactory { //静态工厂方法: public static Book getBook(String bookN ...
- Python单元测试框架
目录 概况 系统要求 使用PyUnit构建自己的测试 安装 测试用例介绍 创建一个简单测试用例 复用设置代码:创建固件 包含多个测试方法的测试用例类 将测试用例聚合成测试套件 嵌套测试用例 测试代码的 ...