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

 

在vue-cli中使用路由的更多相关文章

  1. Vue Cli 中使用 Karma / Chrome 执行样式相关单元测试

    在 GearCase 开源项目 中,我使用了 Vue Cli 的默认测试框架.因此和样式相关的东西,都无法进行测试.因为它并不类似于无头浏览器,而是存在于虚拟内存之中. 现状 在如下 button.s ...

  2. 如何在Vue项目中给路由跳转加上进度条

    1.前言 在平常浏览网页时,我们会注意到在有的网站中,当点击页面中的链接进行路由跳转时,页面顶部会有一个进度条,用来标示页面跳转的进度(如下图所示).虽然实际用处不大,但是对用户来说,有个进度条会大大 ...

  3. vue cli 中关于vue.config.js中chainWebpack的配置

    Vue CLI  的官方文档上写:调整webpack配置最简单的方式就是在vue.config.js中的configureWebpack选项提供一个对象. Vue CLI 内部的 webpack 配置 ...

  4. vue cli中的env详解

    前言 相信使用过 vueCli 开发项目的小伙伴有点郁闷,正常开发时会有三个接口环境(开发,测试,正式),但是 vueCli 只提供了两种 development,production(不包含 tes ...

  5. Vue 项目中对路由文件进行拆分(解构的方法)

    项目需求场景: 在开发项目过程中,在项目过于庞大,路由信息非常多的情况下,如果将路由配置信息都放在一个文件里面,那么这个JS是不方便维护的, 那么,这个时候需要我们把这个庞大的路由文件,根据项目功能分 ...

  6. vue.js中的路由vue-router2.0使用

    在我们平时工作中,我们有时候会有需求,按照不同的规则,加载不同的组件,页面不去跳转,常见的操作是ajax的异步操作,实现局部刷新加载新数据 在vue中,我们写了很多不同的组件,这时候,实现不刷新调用新 ...

  7. vue项目中router路由配置

    介绍 路由:控制组件之间的跳转,不会实现请求.不用页面刷新,直接跳转-切换组件>>> 安装 本地环境安装路由插件vue-router:    cnpm install vue-rou ...

  8. Vue-axios 在vue cli中封装

    common/post.js import axios from 'axios' // 引入axios import qs from 'qs' // 引入qs axios.defaults.baseU ...

  9. vue项目中的路由守卫

    路由守卫的意义就相当于一个保安一样,作用很大,在实际的项目中运用也是不少,也就是当客户在登陆自己账号的时候,有可能存在客户有啥事的时候,自己后台或者pc的关闭全部浏览器,没有点击退出登录,或者在退出登 ...

  10. vue.cli 中使用 less 来写css样式

    vue-cli 的webpack中已配置了less,但 package.json 中没有选项,为了方便开发中使用,需安装一下: 安装方式一: npm install less less-loader ...

随机推荐

  1. C++开源库(一) ----log4cpp详解

    我们在写程序的时候通常会希望将一些信息记录下来,方便我们进行日后的一些信息跟踪,错误排查等等.比如:我们在进行数据库操作的时候,我们通常希望知道现在是程序的哪一部分进行了数据库的操作,所以我们会记录下 ...

  2. jquery事件之事件委托和事件切换

    一.事件委托函数: 方法名 说明 语法 (events 事件类型,data数据,handler 事件处理函数,selector 选择器) live 用于为指定元素的一个或多个事件绑定事件处理函数. j ...

  3. 洛谷P3052 [USACO12MAR]摩天大楼里的奶牛Cows in a Skyscraper

    P3052 [USACO12MAR]摩天大楼里的奶牛Cows in a Skyscraper 题目描述 A little known fact about Bessie and friends is ...

  4. Go入门基础手记

    1. 配置环境变量(临时) export GOPATH=yourpath 2. 跨平台交叉编译 env GOOS=linux GOARCH=amd64 go build 3. test写法 // 首先 ...

  5. 时间format函数引爆的知识点和年末有话说

    年末感慨 转眼之间,一年的最后一天来了. 2017,技术界貌似正在飞跃.多年的量变终于引起了质变. 人工智能,区块链.对此,我很激动,激动着有点害怕,害怕中有点紧张,还有点渴望.未来的至高点,未来的风 ...

  6. 前端实现Tab切换栏

    tab切换,所需的 UI 只有两组元素 - Header 和 Tab,下面介绍几种不同的实现方法和他们的优缺点 本文主要说一些 CSS 的实现方法.最好的方法是 第四种 => label + i ...

  7. 3、kvm配置vnc

    配置kvm通过vnc访问 virsh edit privi-server 添加如下配置: <graphics type='vnc' port='5901' autoport='no' liste ...

  8. 自定义滚动条插件 mCustomScrollbar 使用介绍

    引用有心的学士笔记 http://www.wufangbo.com/mcustomscrollbar/ http://www.jianshu.com/p/550466260856 官网地址 http: ...

  9. Jenkins之自动触发部署之插件Generic Webhook Trigger Plugin

    一.安装好插件 二.构建触发器会出现设置trigger的入口 三.设置的两个部分 第一: Jenkins的这个触发器,这里主要是接受post数据.其中Post content parameters是用 ...

  10. POJ 1061青蛙的约会。求解(x+mT)%L=(y+nT)%L的最小步数T。

    因为是同余,所以就是(x+mT)%L-(y+nT)%L=0.可以写成(x-y+(m-n)T)%L=0.就是这个数是L的倍数啦.那么我可以这样x-y+(m-n)T + Ls = 0.就可以了,s可正可负 ...