当前位置:
首页 > 网站开发 > JavaScript教程 >
-
120_Vue:vue-router路由
简介
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:
- 嵌套的路由/视图表
- 模块化的、基于组件的路由配置
- 路由参数、查询、通配符
- 基于 Vue.js 过渡系统的视图过渡效果
- 细粒度的导航控制
- 带有自动激活的 CSS class 的链接
- HTML5 历史模式或 hash 模式,在 IE9 中自动降级
-
自定义的滚动条行为
安装
npm install vue-router --save-dev
或
cnpm install vue-router --save-dev
PS D:\code\vue\myvue> cnpm install vue-router --save-dev
√ Installed 1 packages
√ Linked 1 latest versions
√ Run 0 scripts
√ All packages installed (1 packages installed from npm registry, used 913ms(network 903ms), speed 163.02KB/s, json 1(21.9KB), tarball 125.31KB)
PS D:\code\vue\myvue>
引入
import VueRouter from 'vue-router'
// 显式声明使用VueRouter
Vue.use(VueRouter);
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
Vue.config.productionTip = false;
// 显式声明使用VueRouter
Vue.use(VueRouter);
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})
运行测试
PS D:\code\vue\myvue> npm run dev
> myvue@1.0.0 dev D:\code\vue\myvue
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
13% building modules 32/34 modules 2 active ...index=0!D:\code\vue\myvue\src\App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
95% emitting
DONE Compiled successfully in 32677ms 22:39:58
I Your application is running here: http://localhost:8080
使用
components目录下创建组件
首页Main.vue
<template>
<h1>首页</h1>
</template>
<script>
export default {
name: "Main"
}
</script>
<style scoped>
</style>
内容页Content.vue
<template>
<h1>内容页</h1>
</template>
<script>
export default {
name: "Content"
}
</script>
<style scoped>
</style>
创建router目录
index.js在vue中一般为配置文件
router目录下创建配置文件index.js,导入组件,安装路由,配置导出路由
import Vue from 'vue'
import VueRouter from 'vue-router'
// 导入组件
import Content from '../components/Content'
import Main from '../components/Main'
// 安装路由
Vue.use(VueRouter);
// 配置导出路由
export default new VueRouter({
routes: [
{
// 路由路径
path: '/content',
name: 'content',
// 跳转的组件
component: Content
},
{
// 路由路径
path: '/main',
name: 'main',
// 跳转的组件
component: Main
}
]
});
main.js中配置路由扫描,配置路由
import Vue from 'vue'
import App from './App'
import router from './router' // 自动扫描目录下的路由配置,即index.js
Vue.config.productionTip = false;
/* eslint-disable no-new */
new Vue({
el: '#app',
// 配置路由
router,
components: { App },
template: '<App/>'
})
App.vue使用路由
router-link:默认会被渲染成一个标签,to属性为指定链接
router-view:用于渲染路由匹配到的组件
<template>
<div id="app">
<h1>VueRouter</h1>
<!--
router-link: 默认会被渲染成一个 <a> 标签,to 属性为指定链接
router-view: 用于渲染路由匹配到的组件
-->
<router-link to="/main">首页</router-link>
<router-link to="/content">内容页</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
打包运行
D:\code\vue\myvue>npm run dev
> myvue@1.0.0 dev D:\code\vue\myvue
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
13% building modules 33/39 modules 6 active ...index=0!D:\code\vue\myvue\src\App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
95% emitting
DONE Compiled successfully in 30761ms 17:05:14
I Your application is running here: http://localhost:8080
点击首页,下面跳转首页
点击内容页,下面跳转内容页
出 处:https://www.cnblogs.com/wl3pb/p/15579869.html
最新更新
Java编程的逻辑-面向对象
深入浅出 JAXB:自定义映射方式
Golang与Java的区别
Python第三方模块安装方法
Python常用模块之OS使用
python如何发送邮件(zmail模块)
Python中什么是类?如何定义?
Python使用xlrd读取Excel
Python使用xlrd写入Excel
go语言学习笔记-初识Go语言
三大常用数据库事务详解之三:事务运行
三大常用关系型数据库事务详解之二:基
三大关系型数据库事务详解之一:基本概
MongoDB常用命令(2)
MongoDB基本介绍与安装(1)
SQLServer触发器调用JavaWeb接口
SQL Server索引的原理深入解析
SqlServer2016模糊匹配的三种方式及效率问题
SQL中Truncate的用法
sqlserver 多表关联时在where语句中慎用tri
VB.NET中如何快速访问注册表
ASP.NET中图象处理过程详解
Vue(1)Vue安装与使用
JavaScript 语言入门
js将一段字符串的首字母转成大写
纯原生html编写的h5视频播放器
H5仿原生app短信验证码vue2.0组件附源码地
TypeScript(4)接口
TypeScript(3)基础类型
TypeScript(2)WebStorm自动编译TypeScript配置