Vue学习笔记|路由、详细、入门

目录

1.什么是路由

2.前端路由和后端路由的区别

3.路由应用实例

4.嵌套路由

5.路由传参

6. 路由缓存方式

7. router相关函数

8. 组件不被销毁

9.路由守卫

10. 路由器的两种工作模式

11. 注意点

---

---

---

1.什么是路由

路由是一组映射关系（key-value）
key是路径，value可能是function或者component

2.前端路由和后端路由的区别

2.1 后端路由
    1）value是function，用于处理客户端提交的请求
    2）工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据
    
2.2 前端路由
    1）value时component，用于展示页面内容
    2）工作过程：当浏览器的路径发生变化，对应的组件就会显示

3.路由应用实例

                                           

如图，左边是导航栏，右边是内容区。

当点击About，在内容区切换About组件的内容，

当点击Home，在内容区切换Home组件的内容，

3.1 下载router包

vue2:npm i router@3

vue3:npm i router@4

3.2 配置路由信息

假设有两个组件，对应两个路由

import VueRouter from 'vue-router'
import About from '../components/About'
import Home from '../components/Home'

export default new VueRouter({
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home
        }
]
})

3.3 引入路由

在main.js文件引入路由

import VueRouter from 'vue-router'
import router from './router/index'

Vue.use(VueRouter)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router:router
}).$mount('#app')

3.4 路由的使用

其中，<router-link>标签用于放导航栏，点击不同的导航，切换content中不同的组件

          <router-view>用于展示对应的组件内容

  <div id="app">
    <router-link to="/about" active-class="active">About</router-link>
    <router-link to="/home"  active-class="active">Home</router-link>
    <div class="content">
      <!--制定组件显示位置-->
      <router-view></router-view>
    </div>
  </div>

4.嵌套路由

                                        

 如图，当点击Home时，在Home组件中，又添加了News和Message路由，只需要在路由配置文件中，添加二级路由。

        {
            path:'/home',