vue-10-路由
1 原始方式
1), 路由, vue-router 2
简单安装方式, 但先讲原理
cnpm install --save vue-router
2), 引用
在main.js中
// 引入 router
import VueRouter from "vue-router"
Vue.use(VueRouter)
3), 注入:
import VueRouter from "vue-router" import HelloWorld from './components/HelloWorld' Vue.use(VueRouter) var router = new VueRouter({
routes: [{
path: "/hello",
component: HelloWorld
}]
})
在 vue 中注入:
new Vue({
el: '#app',
components: {App},
template: '<App/>',
router
})
4), 视图加载位置
在app.vue中
<template>
<div id="app">
<img src="./assets/logo.png">
<HelloWorld/> <router-view></router-view> </div>
</template>
通过 http://localhost:8080/#/hello 的方式访问
2, 但这样使用太乱了, 所以将路由单独提出来:
新建 router 目录, 在下面新建 index.js 文件
import Vue from 'vue' // 引入 router
import VueRouter from "vue-router" import HelloWorld from '../components/HelloWorld'
import HellowIwen from '../components/HellowIwen' Vue.use(VueRouter) export default new VueRouter({
routes: [{
path: "/hello",
component: HelloWorld
}, {
path: "/iwen",
component: HellowIwen
}]
})
main.js抽取逻辑后变为 ;
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App' // 引入 默认加载 index.js
import router from './router' Vue.config.productionTip = false /* eslint-disable no-new */
new Vue({
el: '#app',
components: {App},
template: '<App/>',
router
})
确定加载位置: , 在 app.vue 中
<template>
<div id="app">
<img src="./assets/logo.png">
<HelloWorld/> <router-view></router-view> </div>
</template>
3, 跳转
1), 新建 navelist .vue, 使用 router-link 标签进行跳转
<template>
<div>
<!--用来跳转的-->
<ul>
<li>
<!--使用基本的 to-->
<router-link to="/hello">hello world</router-link>
</li> <li>
<router-link to="/iwen">hello iwen</router-link>
</li>
</ul> <ul>
<li>
<!--v-bind:to 动态数据加载-->
<router-link :to="urlData.helloworld">hello world</router-link>
</li>
</ul> <ul>
<li>
<!-- 使用 path -->
<router-link :to="{path: urlData.helloworld}">hello world</router-link>
</li>
</ul> </div>
</template> <script>
export default {
name: "NavList",
data() {
return {
urlData: {
helloworld: "/hello",
helloIwen: "/iewn"
}
}
}
}
</script> <style scoped>
ul {
list-style: none;
text-align: center;
}
li {
color: red
}
</style>
当点击时, 通过 router-link 标签解携为 a 标签, 进行叶面间跳转
可以在进行 vue init webpack router-example 的时候, 直接创建router, 和上面的结构一致
vue-10-路由的更多相关文章
- vue(5)—— vue的路由插件—vue-router 常用属性方法
前端路由 看到这里可能有朋友有疑惑了,前端也有路由吗?这些难道不应该是在后端部分操作的吗?确实是这样,但是现在前后端分离后,加上现在的前端框架的实用性,为的就是均衡前后端的工作量,所以在前端也有了路由 ...
- 【Vue的路由,SPA概念】
前言 本章是为了以后实现前端页面的搭建而写的, 重点在于如何实现 单页Web应用 因为相对于以前的传统多页面web,有很大的缺陷. 那么就必须了解一下Vue的路由设置. SPA的概念 总的而言,我们知 ...
- Vue 嵌套路由使用总结
Vue 嵌套路由使用总结 by:授客 QQ:1033553122 开发环境 Win 10 node-v10.15.3-x64.msi 下载地址: https://nodejs.org/ ...
- [VUE]关于路由哪些事儿
什么是路由 之前有个小伙伴面试被问到:面试官:不用vue能不能写单页面应用?答:用angular啊(咳咳,开个玩笑),答案确实是可以的,原生js中有个事件叫做onhashchange,可以在windo ...
- 四、vue前端路由(轻松入门vue)
轻松入门vue系列 Vue前端路由 七.Vue前端路由 1. 路由的基本概念与原理 后端路由 前端路由 实现简单的前端路由 vue-router基本概念 2. vue-router的基本使用 基本使用 ...
- Vue 路由懒加载, VueRouter一步完成Vue的路由懒加载 一行代码搞定懒加载
Vue Router路由配置中的component里面配置即可 1 // 路由懒加载的方式加载组件 2 3 component: () => import('@/views/Detail'), ...
- vue父路由默认选中第一个子路由,切换子路由让父路由高亮不会消失
vue父路由默认选中第一个子路由,切换子路由让父路由高亮不会消失 正常默认会有 .router-active-class 识别高亮 达到以上注意: 1. exact 不要加 注意是不要加,exact ...
- vue的路由映射问题
遇到的问题 今天在项目中遇到了一个问题,明明在Router文件夹下的路由js映射文件中,配置好了,如下: // 生日贺卡 { path: 'birthdayRemind', component: lo ...
- 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI
一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...
- Vue.js路由
有时候,我们在用vue的时候会有这样的需求,比如一个管理系统,点了左边的菜单栏,右边跳转到一个新的页面中,而且刷新的时候还会停留在原来打开的页面. 又或者,一个页面中几个不同的画面来回点击切换,这两种 ...
随机推荐
- call和apply(学习笔记)
call() call() 方法调用一个函数, 其具有一个指定的this值和分别地提供的参数(参数的列表). 语法: function.call(thisArg, arg1, arg2, ...) 参 ...
- jq封装
<div id='container' class='container'>盒子</div> <button onClick="f()" >te ...
- LCD调试
(1) 液晶显示模式 并行:MCU接口.RGB接口.Vysnc接口 串行:SPI接口.MDDI接口 (2) 屏幕颜色 实质上即为色阶的概念.色阶是表示手机液晶显示屏亮度强弱的指数标准,也就是通常所说的 ...
- 20155205 郝博雅 Exp9 Web安全基础
20155205 郝博雅 Exp9 Web安全基础 一.实验内容 一共做了13个题目. 1.WebGoat 输入java -jar webgoat-container-7.1-exec.jar 在浏览 ...
- CCNA(001):Packet Tracer简单使用
这几天看一些网络书籍,正好看到CCNA,顺便查了一下. CCNA是什么呢?通俗的说,就是专门研究思科设备的知识,再通俗点说就是研究路由器和交换机,其中也包括配置和设备互连,基本就这几个东西,仅限于当前 ...
- Object constraint language for code generation from activity models
一.基本信息 标题:Object Constraint Language for Code Generation from Activity Models 时间:2018 出版源:Informatio ...
- [转]kaldi 神经网络
转自:http://blog.csdn.net/xmdxcsj/article/details/54695506 overview type author CPU/GPU feature nnet1 ...
- 深入分析.NET应用程序SQL注入【危害】
前言: 前面我们已经简单的剖析了一下.NET应用程序SQL注入.没有看过的朋友移步:http://bbs.ichunqiu.com/thread-7636-1-1.html,在上一篇文章我们已经了 ...
- python多线程在渗透测试中的应用
难易程度:★★★ 阅读点:python;web安全; 文章作者:xiaoye 文章来源:i春秋 关键字:网络渗透技术 前言 python是门简单易学的语言,强大的第三方库让我们在编程中事半功倍,今天, ...
- ajax jsonp请求报错not a function的解决方案
概述 最近工作中使用ajax,有时会报json4 is not a function的错误,有时又不会报错.找了很久,网上说是因为多次请求同一个资源导致的,但是我检查了自己的代码,对于重复资源并没有重 ...