Vue-router
最后更新于：2022-04-02 03:32:03
[TOC]
> [参考文档](https://www.jianshu.com/p/4c5c99abb864)
1. 安装
`npm i vue-router -S`
2. 在`router.js`
```
import Vue from 'vue';
import Router from 'vue-router';
import goodlist from '@/views/goodlist';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
name: 'goodlist',
component: goodlist,
},
]
})
```
3. 在 `main.js ` 中
```
//code
import router from './router'
//code
new Vue({
el: '#app',
router,
components: { App },
template: ' 中
path: 'profile',
component: UserProfile
},
{
// 当 /user/:id/posts 匹配成功
// UserPosts 会被渲染在 User 的 中
path: 'posts',
component: UserPosts
}
]
}
]
})
```
## 编程式的导航
```
// 字符串
router.push('home')
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }}) // -> /user/123
```
### router.go(n)
```
// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)
// 后退一步记录，等同于 history.back()
router.go(-1)
// 前进 3 步记录
router.go(3)
```
## 命名视图
带 name 属性的` router-view`会直接显示.
```
Next`
### 动态链接, url 中传值跳转
生成的 url 为 `orderConfirm?addressId=100005`
```
Next
```
';