VueRouter路由

vue使用路由
先安装vuerouter，同样的，vue2使用vuerouter3,vue3使用vuerouter4。
新建一个路由，再src下建一个router文件夹，
写一个index.js。

import VurRouter from 'vue-router'
//引入组件
import About from '../component/About'
import Home from '../component/Home'

//创建一个路由器
export default new VueRouter({
   routes:[
      {
          path:'/about',
          component:About
      },
      {
          path:'/home',
          component:Hmoe
        }
]
})

然后再main.js中引入router。
import router from ‘./router’

具体使用

要在主页面中使用这些路由需要使用两个新标签。
用来切换路径。

//router-link
//通过to来使用
//而且router-link他渲染完后也是两个a标签。但是他有跳转功能。
//active会当你点亮某个路径时，帮你点亮
<router-link to='/about' active-class="active">About</router-link>
<router-link to='/home' active-class="active">Home</router-link>

//router-view
//用来指定组件展示的位置
<router-view></router-view>

每次跳转到新组件时，原来的组件将会被销毁。
路由组件通常放在pages文件夹下，而一般组件会放在components下

缓存路由组件

因为经常登录时，会输入密码账号，若是因为组件销毁每次都要重新输入会变得很麻烦。
所有需要缓存路由组件，而不是让他直接销毁
添加keep-alive标签

//可以再keep-alive中添加include属性，限定保存哪些组件，避免保存过多的组件。
<keep-alive>
  <router-view></router-view>
</keep-alive>

在使用缓存路由组件时，他会有个问题，就是原本的组件会一直保持运作。因此路由有两个新的生命周期钩子。

activated(){
},
deavtivated(){
}.

他的作用是：当组件出现在页面上的时候便会激活，离开时便会失活。与销毁创建无关。因此只要使用这两个组件就可以实现一些计时的方法。

嵌套子路由

它可以无限嵌套

import VurRouter from 'vue-router'
//引入组件
import About from '../component/About'
import Home from '../component/Home'

//创建一个路由器
export default new VueRouter({
   routes:[
      {
          path:'/about',
          component:About
      },
      {
          path:'/home',
          component:Home,
          children:[
              {
//嵌套子路由不用再加斜杠
                  path:'news',
                  component:News,
              },
             {
                  path:'abls',
                  component:Abls,
              },
        }
]
})

##query参数
有一种比较低级的传参方法，就是通过es6的模板字符串再带上js的变量，实现传参
跳转路由并携带参数，to的字符串写法

1	<router-link :to='`/home/message/detail?id=${this.id}`'></router-link>

另一种传递方法。
to的对象写法

1	<router-link :to="{ path:'/home/message/detail',query:{id:m.id,title:m.title}}"></router-link>

命名路由

给路由命名
再router/index.js中给路由添加上参数name。然后再app组件中，可以通过:to=”{name:’’}”来进行跳转
只是用来简化路由跳转。

params参数

//第一种，还是使用to的字符串写法。
使用restful风格的写法。

1	<router-link :to="`/home/message/detail/${m.id}`"></router-link>

然后再路由内添加占位符来获取传递过来的参数

1 2	path:'/home/message/detail/:id' //通过：可以获取传递过来的id

//第二种，使用to的对象写法。就与query类似
但是params参数不允许使用path路径。需要通过name来跳转。
在需要展示的组件里获得传递过来的参数。通过$route获取。$route.query.内容。或则和$route.params.内容。

接受参数

要显示的组件需要接受父组件传过来的参数，第一个就是使用$route.query或者$route.params。但是这个太繁琐了，让子组件显得不明白。
第二种写法。
通过props对象式。他可以用key-value的方法传递参数

（对象式写法）

在router/index.js中，添加一个参数，props：{a:1, b:4}用来获取父组件传递过来的参数，然后再通过props传递给子组件。子组件中用props接受。

（函数式写法）

1
2
3

props($router){
  return  {a:$router.query.a,b:$router.params.b}
}

函数式有一个很好的写法，就是可以获得$router对象，然后获取其中的query和params参数

另一种写法

props的第二种写法。props：true。值为布尔值。若布尔值为真，他会直接把该组件收到的所有params参数以props的形式传递給子组件