<!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. codeforces 之 Little Pigs and Wolves

    B-Little Pigs and Wolvestime limit per test2 secondsmemory limit per test256 megabytesinputstandard ...

  2. hdu1015 —— 回溯

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1015 因为之前看了下刘汝佳的<算法入门经典>,就用类似打印全排列,八皇后的方法做.本以为不 ...

  3. matlab之find()函数

    Find 这个函数用处也挺大的,这几天看很多程序都见到这一函数,今天要好好给阐述,了解下这个函数是为了找到矩阵或者是数组,向量中的非零元素.下面一大段英文没耐心看.看看例子就行了. 第一个用法是 nd ...

  4. Eclipse中导入github上的项目

    Eclipse中导入github上的项目 转载至: http://blog.csdn.net/hil2000/article/details/8566456 1.首先在github.com上申请一个账 ...

  5. zoj 3813 Alternating Sum（2014ACMICPC Regional 牡丹江站网络赛 E）

    1.http://blog.csdn.net/dyx404514/article/details/39122743 思路:题目意思很清楚了,这里只说思路. 设区间[L,R],区间长度为len=(R-L ...

  6. blog集合

    godiscoder的技术blog 一个不错的技术架构设计blog MySQLOPS 数据库与运维自动化技术分享 stone的技术blog 陈皓专栏 风雪涟漪的技术blog 华为首席科学家 张宴技术b ...

  7. python基础-正则2

    正则函数 Python提供re模块,包含所有正则表达式的功能 由于python的字符串本身也有\转义,所以需要注意: s = "ABC\\-001" 对应的正则表达式应为:'ABC ...

  8. 模拟jQuery的一些功能

    //getStyle function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; } else{ ...

  9. 【Lintcode】095.Validate Binary Search Tree

    题目: Given a binary tree, determine if it is a valid binary search tree (BST). Assume a BST is define ...

  10. poj2356Find a multiple——鸽巢定理运用

    题目:http://poj.org/problem?id=2356 N个数,利用鸽巢定理可知应有N+1个前缀和(包括0),因此其%N的余数一定有重复: 同余的两个前缀和之差一定为N的倍数,据此得出答案 ...