详解在vue-cli中使用路由

1.首先npm中是否有vue-router

一般在vue-cli的时候就已经下载好了依赖包了

2.使用vue的话正常的需要涉及这几个文件

demo/src/router/index.js

import Vue from 'vue'

import Router from 'vue-router'

import Hello from '../components/Hello'//首页

import Test from '../components/test'//需要跳转的页面 给组件重新命名

Vue.use(Router)

export default new Router({

 routes: [

  {//首页

   path: '/',

   name: 'Hello',

   component: Hello

  },

  {//需要跳转的页面

    path:'/test',

    name:'test',

    component:Test//组件名字

  }

 ]

})

demo/src/app.vue

<template>

 <div id="app">

  <img src="./assets/logo.png">

  <p>

  <router-link to="/home">home</router-link>//跳转首页

  <router-link to="/test">test</router-link>//跳转新页面

  </p>

  <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>

demo/src/main.js

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,

 template: '<App/>',

 components: { App }

}).$mount('#app')//实例挂载到元素中

两个页面的组件

这样的话,基本的路由设置就好了,可以按照正常的npm run dev运行这个项目了

另外还有嵌套 自定义多种路由

具体的路由内容可以查看:https://router.vuejs.org/zh-cn/installation.html

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2017-09-22

在vue-cli脚手架中配置一个vue-router前端路由

前言 这篇文章给大家讲解的是在vue-cli脚手架中如何配置vue-router前端路由的相关内容,分享出来供打击参考学习,下面来一起看看详细的介绍: 首先你需要一个main.js文件 //然后引入vue-router import VueRouter from 'vue-router'; //使用路由 Vue.use(VueRouter); //当然如果需要有组件进来的时候也是需要引入的 import Home from '../components/Home.vue'; import New

详解windows下vue-cli及webpack 构建网站(四) 路由vue-router的使用

windows下vue-cli及webpack 构建网站(一)环境安装 windows下vue-cli及webpack 构建网站(二)导入bootstrap样式 windows下vue-cli及webpack 构建网站(三)使用组件 1.本篇文章是建立在以上三篇文章的基础上的. 2.安装 vue-router 插件,运行cmd进入到项目目录下面,运行以下命令: cnpm install vue-router --save-dev 3.在src文件夹下面新建一个文件夹page用于存放模板文件,然后

详解windows下vue-cli及webpack 构建网站(三)使用组件

1.本文章是建立在<windows下vue-cli及webpack 构建网站(一)环境安装>和<windows下vue-cli及webpack 构建网站(一)导入bootstrap样式>两篇文章之上的. 2.在src\components文件夹下面新建两个组件,分别为 header.vue.footer.vue,打开header.vue文件粘贴下面的代码作为网站的头部. <template> <!-- Fixed navbar --> <nav cla

详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式

1.先安装好vue-cli,如果还没有安装好的可以参考:<windows下vue-cli及webpack 构建网站(一)环境安装> 2.安装好之后Vue的欢迎界面,我们要做个例子导入bootstrap的样式,就先去复制一份bootstrap的导航样式过来替换掉Vue的欢迎页面吧,打开Src文件夹下面的components组件目录,然后打开 Hello.vue文件,把 <h1>{{ msg }}</h1> <h2>Essential Links</h2&

详解Windows下安装Nodejs步骤

最近打算把我们的微信端用Vue.js重构,为什么选择Vue.js,一是之前使用的是传统的asp.net mvc,多页面应用用户体验比单页面要差.二是使用过Angular.js,感觉对开发人员要求较高,上手难度较大,而Vue.js在这方面有优势 .这里记录下Vue.js开发环境 Nodejs在Windows下的安装和配置. 第一步:下载 https://nodejs.org/en/ 笔者目前使用V6.10版本(node的偶数版本是稳定版本(长期支持版),奇数版本可以是开发版本,主要用于集成新功能,

详解Windows下调整Tomcat启动参数的实现方法

Windows下调整Tomcat启动参数  Tomcat默认可以使用的内存为128MB,对于访问数比较多.比较吃内存的应用来说,这是不够的.我们可以通过调整Java虚拟机的启动参数来增加Tomcat可使用的内存. 下面就是众所周知的两个参数 -Xms<size> JVM初始化堆的大小 -Xmx<size> JVM堆的最大值 比如,我想设置初始内存大小为128M,最多占用1G,就是下面的设置: -Xms128m -Xmx1024m 在Linux/Unix下,可以通过在 {tomcat

详解Windows下运用Docker部署Node.js开发环境

开始 在windows下部署nodejs开发环境着实遍地坑,每遇到一个问题都要去google原因再试图解决.而且如果你想把你写好的应用交给别人跑跑看,他可能同样需要折腾很久才能真正在他的环境下运行起来.被坑了好些时日最终还是放弃,转战Docker. 文章开头先明确一下我们希望实现的效果: 1.依然在Windows下编辑源代码,在Docker容器中运行代码,最后在Windows的浏览器中看到运行结果,方便后续debug. 2.可以将我开发完成的程序和运行环境一起打包制作成Docker的image,

详解Windows下的权限设置方法

随着动网论坛的广泛应用和动网上传漏洞的被发现以及SQL注入式攻击越来越多的被使用,WEBSHELL让防火墙形同虚设,一台即使打了所有微软补丁.只让80端口对外开放的WEB服务器也逃不过被黑的命运.难道我们真的无能为力了吗?其实,只要你弄明白了NTFS系统下的权限设置问题,我们可以对crackers们说:NO! 要打造一台安全的WEB服务器,那么这台服务器就一定要使用NTFS和Windows NT/2000/2003.众所周知,Windows是一个支持多用户.多任务的操作系统,这是权限设置的基础,

图文详解Windows下使用Redis缓存工具的方法

一.简介 redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合)和zset(有序集合). 这些数据类型都支持push/pop.add/remove及取交集并集和差集及更丰富的操作,而且这些操作都是原子性的.在此基础上,redis支持各种不同方式的排序.与memcached一样,为了保证效率,数据都是缓存在内存中.区别的是redis会周期性的把更新的数据写入磁盘或者把修改操作写入追加的记

详解windows下mysql的主从同步

半路出家到Java,刚开始听说到说程序支持读写分离感觉特别高大上,也一直没接触 偶然的机会接触到了,就一定得记下来. 今天先讲讲数据库的主从同步,两个好处: 是读写分离可以用上.比如 写操作就写到主数据库,读就从从数据库读取 是纯粹给数据库备份,以防硬盘彻底崩了 主从数据库操作准备: 两台电脑,都安装好mysql 5.5及以上版本,最好两台电脑都安装同一版本数据库,且能单独正常使用 记住两台电脑的ip地址: 以我家里电脑为例: 主数据库:192.168.0.102   从数据库:192.168.

详解基于DllPlugin和DllReferencePlugin的webpack构建优化

一个基于vue-cli webpack2模板创建的项目.项目中使用到了vue+vue-router+axios+muse-ui+iview 现在构建一次需要的时间大概是40s左右.真心受不了.虽然在开发过程中,我们不太需要关心构建时间.但是如果在开发hybridApp时,构建的次数就会增多. 一般我们可以把项目分为三部分. 分类 说明 变动频率 vendor_library 核心库 低 vendor 一般项目依赖 中等 code 业务逻辑 高 vendor_library:比如vue,vue-r