《VueJS文档学习》读书会笔记

[hanyuxinting]

Get（学到的知识和技能）

Q（遇到的问题）

demo（代码实例）

分享后的心得&总结

[hanyuxinting]

2018.3.8-2018.3.9: https://router.vuejs.org/en/

[hanyuxinting]

get

路由的几种方式

1. <router-link to="/foo">Go to Foo</router-link>

2. 
   const Foo = { template: '<div>foo</div>' }
   const Bar = { template: '<div>bar</div>' }

const routes = [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar } ]

const router = new VueRouter({ routes // short for routes: routes })

const app = new Vue({ router }).$mount('#app')

#### 动态路由配置

/user/foo and /user/bar 两者匹配同一种路由

const User = { template: '

User

' }

const router = new VueRouter({ routes: [ // dynamic segments start with a colon { path: '/user/:id', component: User } ] })

// 使用动态路由配置的参数 const User = { template: '

User {{ $route.params.id }}

' }

pattern | matched path | $route.params
-- | -- | --
/user/:username | /user/evan | { username: 'evan' }
/user/:username/post/:post_id | /user/evan/post/123 | { username: 'evan', post_id: 123 }

[zhoujinxiu]

从A组件通过路由 又跳到A组件，组件并不会被重新渲染。

我从A路由跳到B路由，两个组件用的不同，为啥我在A组件内部检测不到$route的变换 name与path的区别？

[zhoujinxiu]

GET 编程式导航：this.$router.push(param)

1. param可以为 字符串：this.$route.push('home') 对象：this.$route.push({path:'home'}) this.$router.push('home') 等价于 this.$router.push({path:'home'})并不等价于this.$router.push({name:'home'}) 带有命名的路由：this.$router.push({name:'home',params:{is:'123'}}) 导航到不同的路由，可以使用this.$router.push(); 而获取当前路由对象用的是this.$route
2. 等价于声明式导航：

[zhoujinxiu]

[zhoujinxiu]

通过props将组件与路由解耦： const User = { props:['id'], template:'

user {{id}}

' }; const router = new VueRouter({ routes:[ { path:'user/:id', component:User, props:true }] })

[zhoujinxiu]