<!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. 大数据 - Zookeeper

    Zookeeper 1.  Zookeeper概念简介: Zookeeper是一个分布式协调服务:就是为用户的分布式应用程序提供协调服务 A.zookeeper是为别的分布式程序服务的 B.Zooke ...

  2. JavaScript中函数的无限次运算问题

    开博客有一段时间了,一直没动笔,原因是确实没看到什么值得写的内容.直到今天在司徒正美的博客里看到一个问题. http://www.cnblogs.com/rubylouvre/archive/2012 ...

  3. 在node.js中建立你的第一个HTTp服务器

    这一章节我们将从初学者的角度介绍如何建立一个简单的node.js HTTP 服务器 创建myFirstHTTPServer.js //Lets require/import the HTTP modu ...

  4. next enum in swift

    enum Iter: Int{ case s1=0, s2, s3, s4 mutating func next(){ if self == .s4 { self = .s1 return } sel ...

  5. OpenCV——花环生成函数

    // define head function #ifndef PS_ALGORITHM_H_INCLUDED #define PS_ALGORITHM_H_INCLUDED #include < ...

  6. HihoCoder1650 : 扁平化管理([Offer收割]编程练习赛38)(二分)

    描述 小Hi的公司包括CEO在内一共有N名员工.这N名员工的上下级关系形成树形结构,CEO处于树根,普通员工处于叶子节点. 现在公司希望管理扁平化,要求树形结构中的层级不超过L层.此外,假设A是B的直 ...

  7. mongdb启动问题

    问题:Detected unclean shutdown - /data/db/mongod.lock is not empty. old lock file:/data/db/mongod.lock ...

  8. bzoj 4453 cys就是要拿英魂！ —— 后缀数组+单调栈+set

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4453 这种问题...一般先把询问离线,排序: 区间对后缀排名的影响在于一些排名大而位置靠后的 ...

  9. Python 静态方法和类方法的区别

    python staticmethod and classmethod Though classmethod and staticmethod are quite similar, there’s a ...

  10. WPF 中 UserControl作为另一个Process宿主到Window里， ErrorTemplate的默认红框没有出现

    最近做WPF项目遇到一个问题, 我有2个process, 一个Process里只有Usercontrol, 另一个Process获取前一个Process中Usercontrol并host到当前的win ...