Vue路由简明实操笔记

路由

1、作用：

1）理解： 一个路由（route）就是一组映射关系（key-value)，多个路由需要路由器（router）进行管理

2）前端路由：key是路径，value是组件

3）作用：设定访问路径，并将路径和组件映射起来（就是用于局部刷新页面，不需要请求服务器来切换页面）

2、安装路由：

vue 版本为 2.x，建议 vue-router 安装 3.x 版本。
vue 版本为 3.x，建议 vue-router 安装 4.x 版本。
项目下package.json查看 vue 版本。

npm install vue-router@3.2.0

默认安装，会默认安装最新版vuerouter,会引起报错！

3、创建并配置路由对象

项目中src目录下新建router目录，并在目录中新建index.js，内容如下：

// 引入依赖
import VueRouter from "vue-router"
//导入路由组件
//实际项目中，路由调用组件不放在components中，而是放在pages或者views目录中
import Home from "../pages/Home.vue"
import About from "../pages/About.vue" 
// 使用插件
Vue.use(VueRouter)
// 创建实例并配置
export default new VueRouter({
    routes: [ //注意：路由配置项，名称 routes 没有r 没有r 没有r 
        { 
            path: '/', 
            redirect: '/home' 
            },
        { 
            path: '/home', 
            component: Home
             }
    ]
});
 

4、导入路由：

main.js文件中:

//其他代码略...

//导入路由插件
import VueRouter from 'vue-router'
//引入我们配置的路由
import router from './router/index'

//其他代码略...

//应用路由插件
Vue.use(VueRouter)

new Vue({
  render: h => h(App), 
  //在vue实例中配置路由,简写了。router:router
  router 
}).$mount('#app')

5、基本路由

<!-- 配置路由超链接 和<a>标签作用一样，实际编译后，其实也是转为A标签 to就相当于href -->
    <!-- active-class属性用于哪一个router-link被点击，点击后的class样式，填入样式名即可 -->
<router-link to="/home" active-class="xxx">Home</router-link>
<router-link to="/about" active-class="xxx">About</router-link>
<!-- 用于放置路由展示的组件 -->
<router-view></router-view>

不再展示的路由组件，将会被销毁，不是隐藏，自己可以通过组件的vc实例销毁前钩子自行测试

每一个路由组件的vc实例对象身上都有两个属性：$route 和 $router

所有路由组件，都只需要在router/index.js中导入、在路由配置中注册即可

$route:组件自身的路由对象

$router:全局路由器

6、嵌套路由(多级路由)

首先，router/index.js配置多级路由：

// 引入依赖
import VueRouter from "vue-router"
//导入路由组件
import Home from "../pages/Home"
import About from "../pages/About"
import News from "../pages/News"
import Message from "../pages/Message"
 
// 创建实例并配置
export default new VueRouter({
    routes: [  

        {
            path: '/home', //为home配置子路由
            component: Home, 
            children:[   //children配置项，对象数组，用于配置多级路由
                {
                    path:'news',//子路由路径名称前面不加‘/’
                    component:News //对应组件
                },
                {
                    path:'message',
                    component:Message
                }
            ]
        }, 
        {
            path: '/about',
            component: About
        }
    ]
});

然后，一级路由组件内：

<template>
    <div>
        <h1>我是Home组件啊</h1>
        <ul class="nav"> 
            <!-- to属性：/父级/子级 -->
            <li><router-link to="/home/news" active-class="isactive">news</router-link></li>
            <li><router-link to="/home/message" active-class="isactive">message</router-link></li>
        </ul> 
        <!-- 子路由组件出现的地方 -->
        <router-view></router-view>
    </div>
</template>

<script>

export default {
    name: 'Home'
};
</script>

更多级同样。

6.1路由名字：

...
children:[
    {
        name:'test',//给某条路由配置名字，任意字符串
        path:'MessageDetail',
        component:MessageDetail
    }  
]
  ...  

使用:

<!-- 简化了多级路由的to值 -->
    <router-link :to="{name:test}">xxx</router-link

7、传递参数

7.1 query传参(url)

组件1 --传递—> 组件2

组件1：

<template>
  <div>
    <ul>
      <li v-for="m in mList" :key="m.id">
            <!-- 
                v-bind:to="url" 或 :to
                url与参数的拼接，需要用``包裹，因为绑定后，是表达式
                使用${x}模版语法，提取拼接参数
             -->
        <router-link :to="`/home/message/MessageDetail?id=${m.id}&title=${m.title}`">
            {{m.title}}
        </router-link>
        <!--  另一种结构化写法
        <router-link
          :to="{
            path: '/home/message/MessageDetail',
            query: {
              id: m.id,
              title: m.title,
            }
          }"
        >
         -->
      </li>
    </ul>

    <router-view></router-view>
  </div>
</template>

组件2：

<template>
  <div>
      <!-- 使用组件vc对象中的$route方法中的query.参数  拿到传过来的参数 -->
      <!-- 建议收到计算属性内使用 -->
      <span>{{this.$route.query.id}} - {{this.$route.query.title}} </span> 
  </div>
</template>

7.2 params传参

配置：

...
children:[
    {
        name:'test',//给某条路由配置名字，任意字符串
        path:'MessageDetail/:id/:title',// 这里:id/:title 是占位符，占位符名字，就是获取时候用的
        component:MessageDetail
    }  
]
  ...  

使用:

        <!-- 类似restful风格 -->
    <router-link :to="`/home/message/MessageDetail/${${m.id}}/${${m.id}}`">xxx</router-link>

      <!--  另一种结构化写法
        <router-link
          :to="{
            name: '这里必须写name，也就是路由里面配置的',
            query: {
              id: m.id,
              title: m.title,
            }
          }"
        >
         -->

获取值：

<span>{{this.$route.params.id}} - {{this.$route.params.title}} </span> 

7.3 参数的props配置

配置：

...
children:[
    {
        name:'test',//给某条路由配置名字，任意字符串
        path:'MessageDetail/:id/:title',// 这里:id/:title 是占位符，占位符名字，就是获取时候用的
        component:MessageDetail,
        props:true
        //还有种写法，值是写死的
        //props:{id:123,title:'asdf'}
    }  
]
  ...  

组件内：

//配置接收
props:['id','title'] //然后就可以使用了

仅仅适用于params传参

8、编程式路由跳转

比如按钮操作、定时跳转、条件跳转。。。

//该条记录，浏览器可后退
this.$router.push({ name:'hello', query:{ name:'aaa', age:12 } })
//该条记录，浏览器不可后退
this.$router.replace({ name:'hello', query:{ name:'aaa', age:12 } })
//后退操作
this.$router.back()
//前进操作
this.$router.forward()

目标组件取参数：

 this.$route.query.name;

9、路由缓存

 <keep-alive include="要缓存的路由组件">  
　　<router-view></router-view>
</keep-alive> 

keep-alive不生效问题：如果组件的name和router配置的name不一样，也可能导致keep-alive无法生效，所以要配置成一样。

10、路由组件独有的两个生命周期

//激活,出现在了router-view
activated (){
    ...
    // activated  在路由被激活时执行


}    

//激活后取消
deactivated (){
    ...
    // deactivated在路由失活的时候执行
}