vue-cli之router基本使用
来源:互联网 发布:java ip白名单校验 编辑:程序博客网 时间:2024/06/01 16:52
1,在src目录下新建router目录,再建立index.js
import Vue from 'vue';import VueRouter from 'vue-router';import goods from '@/components/goods/goods';Vue.use(VueRouter);export default new VueRouter({ routes: [ { path: '/', redirect: {name: 'goods'} }});
代码中@是在webpack.base.conf.js里修改的配置,目的是每一次引入组件之类的文件都要写相对路径太麻烦,直接用@代替即可,配置修改如下
resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), } }
2,入口文件main.js里引入并挂载到节点上
import router from './router';/* eslint-disable no-new */new Vue({ el: '#app', router, template: '<App/>', components: { App }});
3,在例如App.vue文件中使用,点击即可切换路由,内容则呈现在router-view容器中
<template> <div id="app"> <div class="tab"> <router-link to="/goods" >商品</router-link> </div> <router-view></router-view> </div></template>
如果有比如商品、商家、评论三个点击切换路由,要想设置当前点击的某个节点的样式,可以设置
.router-link-active {color: rgb(139,0,0);}
阅读全文
0 0
- vue-cli之router基本使用
- vue-router基本使用
- Vue-cli+router+webpack
- vue-cli + webpack + vue-router
- vue学习之路(一)--vue-cli安装+vue-router+vue-resource
- vue-cli及vue-router(一)
- 基于vue-cli的vue项目之路由1--最基本的使用
- vue之vue-router
- Vue之Vue-router
- 使用vue-cli 创建vue2.x项目中使用vue-router 与之前的区别
- vue-router基本教程
- vue学习(四) vue-loader vue-router vue-cli
- 基于vue-cli的vue项目之路由5--router.push,go,replace方法
- windows下vue-cli及webpack 构建网站(四) 路由vue-router的使用
- windows下vue-cli及webpack 构建网站及 路由vue-router的使用
- vue-cli之组件的简单使用
- vue环境搭建vue-cli,vue-router,webpack
- vue-router、vue-loader、vue-cli的作用
- 17092401_CentOS7(64)下Oracle11g创建实例及win7下Oracle客户端连接
- PTG直击|Heat将强化集群资源管理
- 【开源云要闻回顾】SQL Server登陆Linux、Kubernetes新版本发布......
- VMware与OpenStack的斗争转向了混合云
- DevOps正冲击已固化200余年的泰勒管理学理论
- vue-cli之router基本使用
- 【开源云要闻回顾】红帽扩大开源专利范围、Kubernetes生态图出炉......
- OpenStack能拯救混合云吗?
- Podfile
- 容器管理:如何防止容器蔓延与成本蔓延
- 直击PTG|OpenStack组件将获得更好的测试环境
- 5大容器典型用例
- Quartz-任务调度信息持久化到DB中
- [FAQ20103][Network]插入移动卡和非移动卡,非移动卡为主卡时无信号