admin管理员组文章数量:1633845
文章目录
- vue-router路由
- 1、说明
- 2、安装
- 3、测试
vue-router路由
1、说明
Vue Router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:
- 嵌套的路由/视图表
- 模块化的、基于组件的路由配置
- 路由参数、查询、通配符
- 基于Vue.js过渡系统的视图过渡效果
- 细粒度的导航控制
- 带有自动激活的CSS class的链接
- HTML5历史模式或hash模式,在IE9中自动降级
- 自定义的滚动条行为
2、安装
基于第一个vue-cli
进行测试学习;先查看node_modules中是否存在vue-router
vue-router是一个插件包,所以我们还是需要用npm来进行安装的。打开cmd命令行,进入你的项目目录执行如下命令。
npm install vue-router --save-dev
npm安装参数中的–save-dev是什么意思?
当你为你的模块安装一个依赖模块的时候,正常情况下你得先安装它们(在模块根目录下npm install xxx),然后连同版本号手动将它们添加到模块配置文件
package.json
中的依赖里(dependencies)。-save和–save-dev可以省掉你手动修改
package.json
文件的步骤。
npm install xxx -save #自动把模块和版本号添加到dependencies部分
npm install xxx --save-dev #自动把模块和版本号添加到devdependencies部分
如果在一个模块化工程中使用它,必须要通过Vue.use()明确地安装路由功能:
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter);
将一下代码加入入口文件:
import VueRouter from 'vue-router'
//显式声明使用VueRouter
Vue.use(VueRouter);
也就是在main.js
中这样写:
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
Vue.config.productionTip = false
//显式声明使用VueRouter
Vue.use(VueRouter);
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})
那么同理,axios也是一样的安装方法
npm install axios vue-axios --save-dev
将下面代码加入入口文件中(main.js)
import VueAxios from "vue-axios";
import axios from "axios";
Vue.use(VueAxios,axios);
就好比你创建一个Maven项目,你要往pom.xml里加入dependency依赖,maven去帮你自动下载一样。只不过这里你是要用npm install去添加并下载依赖罢了。
3、测试
1、new一个Vue组件(不要再像之前那样new一个HTML文件了),“内容页”,Content.vue
;和一个“首页”,Main.vue
。
Content.vue
组件如下
<template>
<h1>内容页</h1>
</template>
<script>
export default {
name: "Content"
}
</script>
<style scoped>
</style>
Main.vue
组件如下
<template>
<h1>首页</h1>
</template>
<script>
export default {
name: "Main"
}
</script>
<style scoped>
</style>
style scoped中的“scoped”表示一个作用域,是在当前模板中生效。如果不加,就是在所有页面都生效。
2、安装路由,在src目录下,新建一个文件夹:router
,专门存放路由
这样的话,路由的跳转,在前端就可以完成,而根本不需要经过后端。
就相当于后端的@RequestMapping。
在里面新建一个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
}
]
});
但是这只是配置了路由,并没有启用。
我们需要到src下的main.js中去启用,因为整个前端工程只有一个入口main.js
。
import Vue from 'vue'
import App from './App'
import router from './router'
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})
注意此处import的时候,只需要from './router’就可以了,因为它会自动地扫描里面的路由配置,还是比较智能的了。
怎么启用路由,只需要放进去就行了
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip=false;
new Vue({
el: '#app',
//配置路由
router,
components: { App },
template: '<App/>'
});
3、怎么使用配置好的路由
例如我们在App.vue组件的页面展示部分也就是template标签中写两个链接
<template>
<div id="app">
<router-link to="/main">首页</router-link>
<router-link to="/content">内容页</router-link>
<router-view></router-view>
</div>
</template>
其中router-link就好比a标签,to属性就好比href属性。
router-view的功能是展示template模板。是控制一个视图展示。
4、效果
刚打开时
点击首页
点击内容页
版权声明:本文标题:【Vue】vue-router路由的安装、配置、使用 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/xitong/1729177989a1188959.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论