vue-router路由配置
2024-08-31 14:08:14
转自http://www.cnblogs.com/padding1015/
两种配置方法:在main.js中 || 在src/router文件夹下的index.js中
src/router/index.js中
1 引入
import
Vue from
'vue'
import
Router from
'vue-router'
使用/注册:
1
|
Vue.use(Router) |
3. 配置
配置路由:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
export default new Router({ routes: [ { path : ‘/’, //到时候地址栏会显示的路径 name : ‘Home’, component : Home // Home是组件的名字,这个路由对应跳转到的组件。。注意component没有加“s”. }, { path : ‘/content’, name : ‘Content’, component : Content } ], mode: "history" }) |
4. 引入路由对应的组件地址:
1
2
3
|
import Home from '@/components/Home' import Home from '@/components/Content’ |
5. 在main.js中调用index.js的配置:
1
|
import router from './router' |
6. App.vue页面使用(展示)路由:<!-- 展示router -->
把这个标签放到对应位置:
1
|
<router-view></router-view> |
7. 路由切换(原来的<a href=”XXX.html”>等地方):把切换标签和链接改成:
1
2
3
|
<router-link to= "/" >切换到Home组件</router-link> <router-link to= "/content" >切换到Content组件</router-link> |
//这里,to里边的参数和配置时,path的路径一样即可
最新文章
- 菜鸟笔记:java变量命名及峰驼式命名法
- oracle 自增ID
- Win10添加简体中文美式键盘的方法
- 怎样在mysql里面修改数据库名称
- STM32 USB-HID通信移植步骤
- [020]转--C++ swap函数
- mui开发app之自定义事件以更新其他页内容
- SSM手把手整合教程&;测试事务
- :before和::before的区别
- MySQL相关sql语句
- linux性能监控(转)
- 比较python类的两个instance(对象) 是否相等
- 怎么在ReactNative里面使用Typescript
- 二分图判定 POJ-2492
- 基于jQuery的表单操作
- jQuery的end()方法使用详解
- Flutter中集成Font Awesome
- svn 图标状态说明
- JAVA list 列表 字典 dict
- 6.Spring Cloud初相识-------Zool路由