vue-router配置
首先在App.vue中
1.使用router-link组件来导航,通过‘to'属性指定链接,<router-link> 默认会被渲染成一个 `<a>` 标签
<router-link class="tab-item" to="/goods">商品</router-link>
<router-link class="tab-item" to="/ratings">评论</router-link>
<router-link class="tab-item" to="/seller">商家</router-link>
2. 路由出口 ,路由匹配到的组件将渲染在这里
<router-view></router-view>
其次在router文件中的index.js中
1.引入vue和vue-router,并且引入各个组件
import Vue from 'vue'
import Router from 'vue-router'
import Goods from '../components/goods/goods'
import Seller from '../components/seller/seller'
import Ratings from '../components/ratings/ratings'
2.调用Vue.use()
Vue.use(Router)
3.配置路由
export default new Router({
routes: [
{
path: '/',
component: Goods
},
{
path: '/goods',
component: Goods
},
{
path: '/seller',
component: Seller
},
{
path: '/ratings',
component: Ratings
}
]
})
然后在main.js中,引入vue App以及router 启动Vue实例 挂载到#app上,注入路由器,进行渲染
import Vue from 'vue'
import App from './App'
import router from './router' Vue.config.productionTip = false /* eslint-disable no-new */
new Vue({
el: '#app',
router,
render: h => h(App)
})
vue-router配置的更多相关文章
- vue router 配置默认页/404页面
*号通配404默认页面
- Vue Router的配置
1.beforeEnter function requireAuth (route, redirect, next) { if (!auth.loggedIn()) { redirect({ path ...
- vue router 只需要这么几步
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- Vue.js 2.x笔记:路由Vue Router(6)
1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...
- 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI
一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...
- 深入浅出的webpack4构建工具---webpack+vue+router 按需加载页面(十五)
1. 为什么需要按需加载? 对于vue单页应用来讲,我们常见的做法把页面上所有的代码都打包到一个bundle.js文件内,但是随着项目越来越大,文件越来越多的情况下,那么bundle.js文件也会越来 ...
- 深入浅出的webpack构建工具--webpack4+vue+router项目架构(十四)
阅读目录 一:vue-router是什么? 二:vue-router的实现原理 三:vue-router使用及代码配置 四:理解vue设置路由导航的两种方法. 五:理解动态路由和命名视图 六:理解嵌套 ...
- vue学习之用 Vue.js + Vue Router 创建单页应用的几个步骤
通过vue学习一:新建或打开vue项目,创建好项目后,接下来的操作为: src目录重新规划——>新建几个页面——>配置这几个页面的路由——>给根实例注入路由配置 src目录重整 在项 ...
- python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)
昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...
- Vue Router的入门以及简单使用
Vue Router 是Vue官方的路由管理器,是Vue用来实现SPA的插件.它和 Vue.js 的核心深度集成,让构建单页面应用(SPA)变得易如反掌. 基本概念: 路由:是一种映射关系,是 “pa ...
随机推荐
- 解读人:林山云,Proteomic Identification of Protein Glutathionylation in Cardiomyocytes(心肌细胞蛋白质谷胱甘肽修饰的蛋白质组鉴定)
发表时间:(2019年4月) IF:3.950 单位:韦恩州立大学化学系 物种:小鼠心肌细胞 技术:谷胱甘肽修饰蛋白组学 一. 概述: 本研究采用化学选择性蛋白组学方法,鉴定出过氧化物诱导HL-1小鼠 ...
- [Unity3D]Unity3D游戏开发之怪物AI
大家好.欢迎大家关注由我为大家带来的Unity3D游戏开发系列文章,我的博客地址为:http://blog.csdn.net/qinyuanpei. 在上一篇文章中,我们基本上实现了一个 ...
- java8 optional操作
目标:测试option的过滤,链式操作: 代码: package test; import java.util.ArrayList; import java.util.Arrays; import j ...
- Oracle 11g服务OracleDBConsoleorcl启动失败(异常或报错)
OracleDBConsoleorcl:Oracle数据库控制台服务,orcl是Oracle的实例标识,默认的实例为orcl.在运行Enterprise Manager(企业管理器OEM)的时候,需要 ...
- spring 事务 配置 多个
Spring中事务控制相关配置: <bean id="txManager" class="org.springframework.jdbc.datasource.D ...
- python 批量修改包名
#coding=utf-8 import os #import re # 设置编码为utf-8 否则会报错..这时候 sublime控制台会报乱码.但是别担心,utf-8 文件 并不会报错 impor ...
- 计算机学院大学生程序设计竞赛(2015’12)The collector’s puzzle
Problem Description There is a collector who own many valuable jewels. He has a problem about how to ...
- Sublime Text 3 3126 安装+注册码
首先,到官网下载且安装,个人是安装版本的 https://www.sublimetext.com/3 接着,写入注册码.2016/11/26 亲测有效 —– BEGIN LICENSE —– Mich ...
- FFmpeg是一套可以用来记录、转换数字音频、视频,并能将其转化为流的开源计算机程序。
官网:http://ffmpeg.org 一.FFmpeg安装 安装依赖包: yum install libtheora-devel libvorbis-devel 1 FFmpeg编译安装: 由于系 ...
- HDFS配额查询
### 查看目录配额 hdfs dfs -count -q -h /user/hive/warehouse/db_name.db ### 查看整个HDFS的空间大小 hdfs dfs -df -h / ...