下载vue-router: cnpm install vue-router --save

router/main.js

/*引入所需要的组件*/
import VueRouter from 'vue-router';
import about from "compontents/about.vue"
import news from "compontents/news.vue"
import Router from 'vue-router'
import VueResource from 'vue-resource'; Vue.use(VueRouter);
Vue.use(VueResource);
Vue.use(Router); const routes = [ //这里是routes,没有r
{ path: '/goods', component: goods },
{ path: '/ratings', component: ratings },
{ path: '/seller', component: seller }
];
const router = new VueRouter({
routes,
linkActiveClass:'active'
});
router.push('/goods'); new Vue({
el:'#app',
router,
template:'<App/>',
components: { App }
})

  compontents/about.vue 与compontents/news.vue 一样

<template>
<div>
我是关于我们/我是新闻
</div>
</template> <script>
export default { }
</script>

  将about.vue和news.vue链接起来

<template>
<div id="app">
<div class="tab">
<div class="tab-item">
<router-link to="/about">关于</router-link>
</div>
<div class="tab-item">
<router-link to="/news">新闻</router-link>
</div>
</div>
<div>
<router-view></router-view>
</div>
</div>
</template>

  

vue2.0学习之路由的更多相关文章

  1. vue2.0学习笔记之路由(二)路由嵌套+动画

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. vue2.0学习笔记之路由(二)路由嵌套

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. Vue2.0中的路由配置

    Vue2.0较Vue1.0,路由有了较大改变.看一下Vue2.0中的路由如何配置: 步骤一: 在main.js文件中引入相关模块以及组件及实例化vue对象配置选项路由及渲染App组件 默认设置如下: ...

  4. VUE2.0学习总结

    摘要: 年后公司项目开始上vue2.0,自己对学习进行了总结,希望对大家有帮助! VUE2.0学习 vue介绍 vue是什么? https://vuefe.cn/guide vue也是一个数据驱动框架 ...

  5. Vue2.0学习--Vue数据通信详解

    一.前言 组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.组件间如何传递数据就显得至关重要.本文尽可能罗列出一些常见的数据传递方式,如p ...

  6. vue2.0学习教程

    十分钟上手-搭建vue开发环境(新手教程)https://www.jianshu.com/p/0c6678671635 如何在本地运行查看github上的开源项目https://www.jianshu ...

  7. Vue2.0学习笔记一 :各种表达式

    #,过滤器 #,在Vue2.x中,过滤器只能在mustache绑定中使用,为了在指令帮定中实现同样的行为,你应该使用计算属性:     #,过滤器可以串联 {{ message | filterA | ...

  8. vue2.0学习(二)

    1.关于模板渲染,当需要渲染多个元素时可以 <ul> <template v-for="item in items"> <li>{{ item. ...

  9. vue2.0里的路由钩子

    路由钩子 在某些情况下,当路由跳转前或跳转后.进入.离开某一个路由前.后,需要做某些操作,就可以使用路由钩子来监听路由的变化 全局路由钩子: router.beforeEach((to, from, ...

随机推荐

  1. Teamviewer 退出时设置不锁屏

    在pc端teamviewer登录同伴的机器时,页面最上端会出现一个工具栏,如图: 点击"动作"  ---〉"锁定" 取消打钩 "在会话结束时锁定&qu ...

  2. CNN:扩张卷积输出分辨率计算

    扩张卷积(Dilated convolutions)是另一种卷积操作,也叫做空洞卷积(Atrous convolution).相比于普通的卷积,相同的卷积核,空洞卷积能够拥有更大的感受野. 相同的卷积 ...

  3. JS高级学习笔记(2)之js多线程

    参考大神:Javascript多线程 web worker ---- 6.Web Worker 概述 截图过来: 线程之间的通信 let worker = new Worker(‘js文件路径’) 主 ...

  4. python + selenium +win32gui + winspy 实现图片上传

    过程:模拟点击上传按钮,打开Windows对话框,编辑栏输入文件路径(或网址)点击确定.网上随便找了一个进行测试. 点击后出现Windows上传对话框 用 winspy 来检测窗口的句柄 python ...

  5. Linq------连表查询

    1 List<Student> list = new List<Student>() { ,sex="男"}, ,sex="男"}, , ...

  6. 关于python请求库Selenium安装所遇到的问题

    今天,初次接触python,在网上买了一本关于爬虫的书,因为之前电脑上存在python,所以就对着书直接进行的请求库的安装,安装的时候,主要遇到了下边一个问题,在安装Selenium的时候,出现以下提 ...

  7. Window Mysql5.7免安装版配置

    1.下载mysql 5.7 32位:https://dev.mysql.com/get/Downloads/MySQL-5.7/mysql-5.7.19-win32.zip 5.7 64位:https ...

  8. CMake变量(提供信息的变量)

    目录 CMAKE_VERSION CMAKE_MAJOR_VERSION CMAKE_MINOR_VERSION CMAKE_PATCH_VERSION CMAKE_TWEAK_VERSION CMA ...

  9. vue中报错Props with type Object/Array must use a factory function to return the default value

    Invalid default value for prop "value": Props with type Object/Array must use a factory fu ...

  10. atomic一定线程安全吗

    atomic只是保证了操作的原子性,原子操作即一个操作不可再分. atomic只是对读写操作进行了加锁,保证了多线程开发时一个读写操作完成之后才能进行下一个读写操作 atomic和线程安全没有太大的关 ...