#vue全家桶
vue-route的基本使用
** //第一步：引入vue ，引入vuerouter //第二步：模块化机制使用这个插件 //第三步：创建路由对象，routes这个单词别写错 //第四步：在main.js中，导入router对象，然后，挂载router实例，挂载到vue中 //第五步：在APP.vue中，通过router-link导入对应的路由，通过router-view渲染对应的路由**
## 动态路由匹配和路由复用
在index.js里面创建路由
` path:'/user/:id',
name:'user',
component: User,`
在App.vue里面``<router-link :to="{name:'user',params:{id:1}}">User1</router-link>
<router-link :to="{name:'user',params:{id:2}}">User2</router-link>``
在User.vue`<div>用户页面 {{$route.params.id}}</div>`
` created () {
console.log(this.$route.params.id);
},`
**相应路由参数的变化**
` // watch:{
// $route:(to,from)=>{
// console.log(to.params.id);
// // 发起ajax 请求后端接口数据 数据驱动视图
// }
// }
beforeRouteUpdate(to,from,next){
console.log(to.params.id);
// 一定要调用next，不然会阻塞整个路由
next();
} `
3.5 404路由和路由匹配优先级
当找不到路由的时候，就会弹出404页面意思是报错的意思，具体创建路由如下：
`{
path:'*',
component: () => import('@/views/404')}`
**路由优先级意思，如果名称相同的路由，按上到下的顺序来匹配路由**
3.6路由参数查询
和上面正常创建路由
``` {
path:'/page',
name:'page',
component:()=>import('@/views/Page')},```
，然后page这个组件页面如下：
```<template>
<div>
<h3>page页面</h3>
</div>
3.8路由组件传值 在上面的创建路由下面加个props：true
path:'/user/:id',
name:'user',
component: User,
props:true,``这里就可以把对应的id传到对应的路由组件中
```
然后在User.vue组件中，
```<template>
<div>
<div>用户页面 {{id}}</div>这里是使用这个id
</div>
</template>
<script>
export default {
created () {
console.log(this.$route.params.id);
},
props:['id'],这里是id传过来
</script>
<style lang="scss" scoped>
</style>```视频后面还有种函数传值的，看视频吧
**3.10嵌套路由就是在组件里面加2个路由而已，要加个渲染view-review**
``` children:[ 这里在原user路由下，创建2个子路由
// {
// path:'profile',
// component:()=>import('@/view/Profile')
// },
// {
// path:'post',
// component:()=>import('@/view/Post')
// }
// ] ```
然后创建2个组件profile和post，最后在app.vue里
```<!--路由嵌套-->
<router-link to='/user/1/profile'>user/1/profile</router-link>
<router-link to='/user/1/posts'>user/2/posts</router-link>```
3.11命名视图的使用
```{
path: '/home',
name: 'home',
//component: Home //Home这是名字把组件导入进来
components:{
default:Home, //默认的名字
main: () => import('@/views/Main'),
sideBar: () => import('@/views/SideBar'),
}```
然后创建2个组件Main和SideBar，然后建2个view渲染出来
```<router-view></router-view> <!--这个是渲染home组件出来的-->
<router-view name='main'></router-view>
<router-view name='sideBar'></router-view>```
3.12 如何使用全局守卫做登录操作
这知识点总结就是，打开网页如果没登录账户就自动跳转到登录页面，如果已经登录账户了，就不用再跳转登录页面
首先，在route底下的index.js创建2个新路由
```{
path:'/notes',
name:'notes',
component:()=> import('@/views/Notes')
},
{
path:'/login',
name:'login',
component:()=> import('@/views/Login')
},```
然后创建2个组件Notes和Login，最后在App.vue中渲染notes组件出来
```<!--用动态路由的方式-->
<router-link :to='{name:"notes"}'>我的笔记</router-link>```
这里面在Login.vue组件设置下登录页面，
```<template>
<div>
<h2>登录页面</h2>
<input type="text" v-model='user'>
<input type="password" v-model='pwd'>
<button @click='handleLogin'>登录</button>
</div>
</template>
<script>
export default {
data() {
return {
user: '',
pwd: ''
}
},
methods: {
handleLogin() {
//1.获取用户名和密码
// 2.与后端发生交互
setTimeout(() => { //这里用延时1秒来模拟后端
let data = {
user:this.user
}
// 保存用户名到本地
localStorage.setItem('user',JSON.stringify(data));
// 跳转到我的笔记页
this.$router.push({
name:'notes'
})
}, 1000);
}
},
}
</script>
<style lang="scss" scoped>
</style>```
3.13组件内部的守卫的应用
**这节大概意思做1个输入框的页面，然后用户在输入框输入内容时候，如果不小心点错其它东西，会弹出一个框来提示用户是否确认离开，这样就避免点错其它东西到其它页面去，因为去其它页面，输入框里面的内容就没了，如果点错就尴尬了**
首先跟上面一样，创建个eaditor的路由，在App.vue里渲染这个路由出来，然后重点一样是在组件Eaditor.vue里面配置内容，代码如下：
```<template>
<div>
<h2>用户的编辑页面</h2>
<textarea v-model='content' cols="30" rows="10"></textarea>
<button @click='saveContent'>保存</button>
<ul> // 往列表里面添加数据
<li v-for='(item,index) in list' :key='index'>
<h3>{{item.title}}</h3>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
content: '', //定义一个空的字符串
list:[]
}
},
methods: {
saveContent() {
this.list.push({
title:this.content
})
this.content = ''; //清空文本输入框
}
},
beforeRouteLeave(to,from,next){
if(this.content){
alert('请确保保存信息之后，再离开');
next(false);
}else{
next()
}
} // 这方法是看用户点其他东西后，是否有离开本页面想法
}
</script>
<style lang="scss" scoped>
</style>```
## 3.14 路由元信息实现权限控制
给需要添加权限的路由设置meta字段
首先哪个路由需要就在哪个路由下加meta，代码如下：
```{
path:"/blog",
name:'blog',
component:()=>import('@/views/Blog'),
meta:{
requireAuth:true // blog加到黑名单了
}
},```
难理解的是在main.js中写这个权限，
```// 全局守卫
router.beforeEach((to, from, next) => {
if(to.matched.some(record=>record.meta.requireAuth)){
// 需要权限
if(!localStorage.getItem('user')){ //判断user是否有值，没就跳转登录，有就放行
next({
path:'/login',
query:{
redirect:to.fullPath
}
}) // 这个在黑名单，要跳转页面
}else{
next(); // 在白名单，放行
}
}
next();
})``` 还有最后一点也在note.vue做了修改，可以看看视频
## 3.15路由组件内在什么时机获取数据
数据获取
有时候，进⼊某个路由后，需要从服务器获取数据。例如，在渲染⽤
户信息时，你需要从服务器获取⽤户的数据。我们可以通过两种⽅式
来实现：
导航完成之后获取：先完成导航，然后在接下来的组件⽣命周期
钩⼦中获取数据。在数据获取期间显示“加载中”之类的指示。
导航完成之前获取：导航完成前，在路由进⼊的守卫中获取数
据，在数据获取成功后执⾏导航。
这里是导航完成后获取数据的代码：
先在根目录test新建vue.config.js，
```module.exports = {
devServer:{
before:(app,serve)=>{
app.get('/api/post',(req,res)=>{
res.json({ //返回定位数据
title:'vue-router的数据获取',
body:'1.在导航完成之后获取数据'
})
})
}
}
}```
然后，在根目录test终端编码cnpm i axios -s下载这个axios，然后npm run serve重启服务器，然后在main.js导入axios，代码如下：
`import axios from 'axios';
Vue.prototype.$http = axios; // 挂载axios到vue里面`
新建Post2组件来显示数据，记得在index.js里创建post的路由，还有记得也要在App.vue中渲染哦
```<template>
<div class="post">
<div v-if='loading' class="loading">Loading........</div>
<div v-if='error' class="error">{{error}}</div>
<div v-if='post'>
<h3>标题：{{post.title}}</h3>
<p>内容：{{post.body}}</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
post: null,
error:null,
loading:fasle
};
},
created(){
console.log(this.$http);
this.getPostData(); // 获取数据
},
methods: {
async getPostData() {
try{
this.loading = true;
const [data] = await this.$http.get('/api/post');
this.loading = false;
this.post = data;
} catch (error) {
this.error = err.toString()
}
}
}
}
</script>
<style lang="scss" scoped>
</style>```
