From 089333a5bf0d51f095be899ee48a247eba750079 Mon Sep 17 00:00:00 2001 From: ewall <1054064180@qq.com> Date: Mon, 21 May 2018 18:04:49 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B7=AF=E7=94=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 59 +++++---------------------------------------- src/router/index.js | 30 +++++++++++++---------- src/view/goods.vue | 13 ++++++++++ src/view/test.vue | 29 ++++++++++++++++++++-- 4 files changed, 63 insertions(+), 68 deletions(-) create mode 100644 src/view/goods.vue diff --git a/README.md b/README.md index 18b851d..47fa234 100644 --- a/README.md +++ b/README.md @@ -1,54 +1,7 @@ -# myproject +# 手把手教你用vue+node+mongodb搭建一个小商城 -> A Vue.js project - -## Build Setup - -``` bash -# install dependencies -npm install - -# serve with hot reload at localhost:8080 -npm run dev - -# build for production with minification -npm run build - -# build for production and view the bundle analyzer report -npm run build --report -``` - -文本 ------- -# 普通文本 -这里是普通文本 - -# 单行文本 - 这里是单行文本 - -# 换行 -直接回车不能换行, -这样就可以换行了 - -# 文本块 -1、 - - 这里是文本块 - 这里是文本块 - 这里是文本块 - -2、 - -``` -这里是文本块 -这里是文本块 -这里是文本块 -``` - -# 代码高亮 -```javascript -document.getElementById('test').innerText="hello world"; -``` - -# 文字高亮 -`html` `css` `js` \ No newline at end of file +一、章节目录 +[1.前期准备工作][https://www.jianshu.com/p/0b91e9a05694] +2.什么是动态路由 +3.什么是嵌套路由 +4.什么是编程式路由 \ No newline at end of file diff --git a/src/router/index.js b/src/router/index.js index 2117c11..41e0a9f 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -4,27 +4,31 @@ import HelloWorld from '@/components/HelloWorld' import Test from '@/view/test' import Title1 from '@/view/Title1' import Title2 from '@/view/Title2' +import Goods from '@/view/goods' Vue.use(Router) export default new Router({ - routes: [ - { + routes: [{ path: '/test', name: 'HelloWorld', component: Test, - children: [ - { - path: 'Title1', - name: 'Title1', - component: Title1 - }, - { - path: 'Title2', - name: 'Title2', - component: Title2 - } + children: [{ + path: 'Title1', + name: 'Title1', + component: Title1 + }, + { + path: 'Title2', + name: 'Title2', + component: Title2 + } ] + }, + { + path: '/goods', + name: 'goods', + component: Goods } ] }) diff --git a/src/view/goods.vue b/src/view/goods.vue new file mode 100644 index 0000000..121b069 --- /dev/null +++ b/src/view/goods.vue @@ -0,0 +1,13 @@ +<template> + <div class="goods"> + This is goods + <span>{{$route.query.goodsId}}</span> + </div> +</template> +<script> +export default { + +} + +</script> +<style scoped></style> diff --git a/src/view/test.vue b/src/view/test.vue index 4b019ff..6a6f646 100644 --- a/src/view/test.vue +++ b/src/view/test.vue @@ -1,16 +1,41 @@ <template> <div class="test"> - this is id : {{$route.params.testId}} - <br/> this is name : {{$route.params.testName}} + <!-- 动态路由 --> + This is id : {{$route.params.testId}} + <br/> + This is name : {{$route.params.testName}} + <!-- 嵌套路由 --> <router-link to="/test/title1">标题1</router-link> <router-link to="/test/title2">内容2</router-link> <router-view></router-view> + + <!-- 编程式路由 --> + <div @click="gotoGoods">跳转到商品详情页面</div> </div> </template> <script> export default { + data() { + return { + msg: 'hello vue' + } + }, + methods: { + gotoGoods() { + // this.$router.push('/goods'); + // this.$router.push({ + // path: '/goods?goodsId=666' + // }); + this.$router.push({ + path: '/goods', + query:{ + goodsId:666 + } + }); + } + } } </script>