<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>

    <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>

</head>

<body>

    <div id="app">

        <router-link to="/goodslist">商品列表</router-link>

        <router-link to="/newslist">新闻列表</router-link><br/>

        <!-- 路由出口 -->

        <!-- 路由匹配到的组件将渲染在这里 -->

        <router-view></router-view>

    </div>

</body>

<script>

    //1.定义好组件

    const newsListComponent = Vue.extend({

        template:'<ul><li>美、英、法联合侵略叙利亚</li><li><router-link to="/newsdetail/10001">乘客用钢笔把飞机逼停了</router-link></li><li><router-link to="/newsdetail/10006">韩国戴眼镜女主播</router-link></li></ul>'

    })

    const goodsListComponent = {

        template:'<ul><li>卫龙辣条</li><li>麻辣小龙虾</li><li>长沙臭豆腐</li></ul>'

    }

    //新闻详情组件

    //拿到路径中的参数，可以参考https://router.vuejs.org/zh-cn/essentials/dynamic-matching.html

    const newsDetailComponent = {

        template:'<div>我是新闻详情 传递过来的id是 {{$route.params.newsId}}</div>'

    }

    //2.创建路由对象，设置路由规则

    const router = new VueRouter({

        routes:[//其中routes很容易写错，建议拷贝

            { path: '/', redirect: '/goodslist' },

            {path:'/goodslist',component:goodsListComponent},

            {path:'/newslist',component:newsListComponent},

            {path:'/newsdetail/:newsId',component:newsDetailComponent}

        ]

    })

    //3. 注入到根实例,从而让整个应用都有路由功能

    const vm = new Vue({

        router

    }).$mount('#app')

</script>

</html>

很好理解吧

一个VUE的小案例的更多相关文章

  1. 跟我一起做一个vue的小项目（二）

    这个vue项目是紧跟着之前的项目跟我一起做一个vue的小项目(一)来的. 我继续后面的开发(写的比较粗糙,边学边记录) 下图是header头部的样式 header组件内容如下 //header.vue ...

  2. 一个ssm综合小案例-商品订单管理----写在前面

    学习了这么久,一直都是零零散散的,没有把知识串联起来综合运用一番 比如拦截器,全局异常处理,json 交互,RESTful 等,这些常见技术必须要掌握 接下来呢,我就打算通过这么一个综合案例把这段时间 ...

  3. Vue.js小案例、生命周期函数及axios的使用

    一.调色框小案例: 随着三个滑动框的变化,颜色框的颜色随之改变 1.1.实例代码 <!DOCTYPE html> <html lang="en" xmlns:v- ...

  4. 跟我一起做一个vue的小项目（八）

    接下来我们进行的是城市选择页面的路由配置 添加city.vue,使其点击城市,然后跳转到city页面 //router.js import Vue from 'vue' import Router f ...

  5. 跟我一起做一个vue的小项目（五）

    接下来我们要做的是热门推荐页面,我们写一个推荐组件 使用的方法也是前端data中的数据渲染到页面上面,这里对文字过长取省略号的方法不成功使用了一个小技巧 使用了min-width:0 我们来看完整的代 ...

  6. 跟我一起做一个vue的小项目（四）

    接下来我们进行的是轮播页面下面的导航页的开发 我们需要的是实现轮播页下面的图标,并且实现轮播效果 这个话,其实基本思路先是渲染出小图标,然后,我们要对页数进行判断,如果图标的个数展示的就是8个,那个这 ...

  7. Vue.js小案例(2)

    即时搜索 这个例子主要应用了vue.js的自定义过滤器,可以通过Vue.filter()注册一个全局过滤器,具体用法可以参考这里,vue.js也提供了一些内置过滤器. CSS代码: [v-cloak] ...

  8. Vue.js小案例(1)

    数据绑定 数据绑定是vue.js的基础.本例中就是利用了vue.js的v-model指令在表单元素上创建双向数据绑定. <!--这是我们的View--> <div id=" ...

  9. 跟我一起做一个vue的小项目（APPvue2.5完结篇）

    先放一下这个完结项目的整体效果 下面跟我我一起进行下面项目的进行吧~~~ 接下来我们进行的是实现header的渐隐渐显效果,并且点击返回要回到首页 我们先看效果 在处理详情页向下移动过程中,heade ...

随机推荐

  1. oracle数据库如何备份一张表

    --用户名:tms--创建表ts_dictionary的备份create table ts_dictionary_20160715 as select * from ts_dictionary; 补充 ...

  2. OpenGL几何变换---翻译http://www.songho.ca/opengl/gl_projectionmatrix.html

    Overview 几何数据——顶点位置,和法向量(normal vectors),在OpenGL 管道raterization 处理过程之前可通过顶点运算(Vertex Operation)和基本组合 ...

  3. 分享知识-快乐自己：Hibernate 中的 HQL 语句的实际应用

    概要: Hibernate 支持三种查询方式: HQL查询.Criteria查询及原声 SQL (Native SQL)查询. HQL(Hibernate Query Language,Hiberna ...

  4. 练习E-R图书管理数据库

  5. TestDescription文档描述测试过程

    测试描述文档是用xml语言描述测试过程的文档,一个测试过程包括测试信号建立,UUT引脚确定,建立连接关系,数据测量,断开连接关系,复位测试信号等步骤. 下图用标准的ATML语言描述了接通直流电源并测量 ...

  6. bzoj 4503 两个串 快速傅里叶变换FFT

    题目大意: 给定两个\((length \leq 10^5)\)的字符串,问第二个串在第一个串中出现了多少次.并且第二个串中含有单字符通配符. 题解: 首先我们从kmp的角度去考虑 这道题从字符串数据 ...

  7. MongoDB4.0.0的安装配置—windows

    一.背景 由于要学习MongoDB,所以就下载了最新的MongoDB 的Community Server版的4.0.0版本.可能是新的版本的缘故,在安装配置上与MongoDB3有许多不同,而且在3中的 ...

  8. Digging-贪心

    When it comes to the Maya Civilization, we can quickly remind of a term called the end of the world. ...

  9. Redux API之applyMiddleware

    applyMiddleware(...middlewares) 使用包含自定义功能的 middleware 来扩展 Redux 是一种推荐的方式.Middleware 可以让你包装 store 的di ...

  10. CodeForces 1131G. Most Dangerous Shark

    题目简述:从左到右依次有$n \leq 10^7$个Domino骨牌,高度为$h_i$,手动推倒他的花费为$c_i$.每个骨牌之间的距离为$1$.一个骨牌可以被向左或者向右推倒.当第$i$个骨牌被推倒 ...