$ cnpm install vue-router --save
vue的基本用法就是，分割成好多个组件，
每个组件有 data,template,methods,computed,等等， 还有 components
这些组件都需要挂载在 html上
根组件比较简单， 就是在 new Vue（{}）的时候，可以用el 字段绑定挂载，
或者生成实例后，new Vue({}).$mount("app") 来挂载
而其他组件则需要从根组件开始， 一个一个用标签的方式进行挂载，
（或者叫渲染？插入？）
然后就会出现一个树状结构，每个组件的最基本关系都是 父子关系。
父子关系的数据传递是靠 props 和 自定义事件， 以及slot来解决的。
为了方便非父子间组件的数据传递， 有了vue-x, store,state.
但是接触了vue-router之后发现，
挂载，或者渲染组件的时候，不一定要用父子间关系，
而是根据路由进行配置。
当然最后的挂载（渲染？，插入？），也是需要 <router-view> 这个标签来实现的。
但你发现，没有了父子关系之后，
他要怎么传递数据呢？
似乎是用url，除了url,和vue-x 还有别的方式吗？
还有一个问题是，既然组件可以用父子间关系来引入，也可以用router来引入，
那么什么时候用父子间比较好？，什么时候用router引入比较好？
以上作为对vue的一点感受， 外加带着疑问去学一下视频。
router.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import About from '@/components/About'
Vue.use(Router)// 为了注入?
export default new Router({
routes: [
{
path: '/home',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
]
})
想成所有组件都要在routes进行注册?
main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,//必须要在根实例上注入.
components: { App },
template: '<App/>'
})
App.vue
<template>
<div id="app">
<router-link to="/home">home</router-link>
<router-link to="/about">about</router-link>
<a href="#/home">home</a>
<a href="#/about">about</a>
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
用a标签也可以跳转到相应的组件,
只要url相应的改变就可以
image.png
mode字段,
export default new Router({
mode : "history",// 用的是html的history
routes: [
...
]
})
<router-link to="/home">home</router-link> // 不刷新跳转
<router-link to="/about">about</router-link> // 不刷新跳转
<a href="/home">home</a>//刷新跳转
<a href="/about">about</a>// 刷新跳转
......................
export default new Router({
mode : "hash",// 默认就是哈希模式
routes: [
...
]
})
<router-link to="/home">home</router-link> // 不刷新跳转
<router-link to="/about">about</router-link> // 不刷新跳转
<a href="#/home">home</a>//不刷新跳转
<a href="#/about">about</a>//不刷新跳转
用bind语法
<router-link :to="{path : '/home'}">home</router-link>
<router-link :to="{path:'/about'}">about</router-link>
这样就不用写死了?
我们发现,这个路由是通过#,来实现的,
或者说是根据url来实现的
URL 的两种风格
RESTful : a/b/c/d
强调的是层次感?
非RESTful : ?key=value&key=value
强调的是数据?
动态路由匹配
App.vue
<template>
<div id="app">
<router-link :to="{path : '/home'}">home</router-link>
<router-link :to="{path:'/about'}">about</router-link>
<router-link :to="{name : 'Room',params : {id : 666}, query : {kw : 'wo'}}">room</router-link>
<router-link v-for="item in ids" :to="{name : 'Room',params : {id : item.id}}">{{item.name}}</router-link>
<router-view/>
</div>
</template>
<script>
export default {
name: 'App',
data () {
return {
ids : [
{
id : 111,
name : "渡一公开课"
},
{
id : 222,
name : "渡一就业班"
},
{
id : 333,
name : "渡一进阶班"
}
]
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
router.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import About from '@/components/About'
import Room from '@/components/Room'
import Err from '@/components/Err'
import Hello from '@/components/Hello'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/home',
name: 'Home',
component: Home
},
{
path: '/about/:di',
name: 'About',
component: About
},
{
path: '/room/:id?',// 这里如果没有 ? 那 /room就不会渲染
name: 'Room',
component: Room
},
{
path: '/err',
name: 'Err',
component: Err
},
{
path: '/',
name: 'Hello',
component: Hello
},
{
path: '*',// 初级的导航守卫
redirect (to) {
if (to.path == "/abc") {
return "/home"
}else {
return "/err"
}
}
},
]
})
main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
Room.vue
<template>
<div class="wrapper">
<div v-if="!$route.params.id">欢迎来到腾讯课堂</div>
<div v-else>当前的房间号为 :{{$route.params.id}} 当前房间名为{{roomName}}</div>
</div>
</template>
<script>
export default {
name : "Room",
data () {
return {
roomName : ""
}
},
created () {
if (this.$route.params.id) {// 模拟根据id从后台获取房间名(数据)
setTimeout(() => this.roomName = "渡一",3000);
}
},
watch : {
$route(to,from) {
console.log(to.params.id,from.params.id);
}
}
}
</script>
<style>
</style>
其他组件就是基本模板.
