菠萝咕噜肉

Appearance

32. Vue Router 相关理解 ​

32.1 相关理解 ​

32.1.1 vue-router的理解 ​

  • vue的一个插件库，专门用来实现SPA应用

32.1.2 对SPA应用的理解 ​

  1. 单页 web 应用(single page web application,SPA )
  2. 整个应用只有一个完整的页面
  3. 点击页面中的导航链接不会刷新页面，只会做页面的局部更新
  4. 数据需要通过ajax请求获取

img

32.2 路由的理解 ​

  1. 什么是路由 ？
    • 一个路由就是一组映射关系（key : value）
    • key 为路径，value 可能是 function 或 componen
  2. 路由分类 ？
    • 后端路由
      • 理解：value 是 function，用于处理客户端提交的请求
      • 工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数处理请求，返回响应数据
    • 前端路由
      • 理解：value 是 component ，用于展示页面的内容
      • 工作过程：当浏览器的路径改变时，对应的组件就会显示

32.3 基本路由 ​

32.3.1 安装与应用 ​

  1. 安装 vue-router ，命令：npm i vue-router@3 ( 这里如果是 vue2 需要加版本号 vue3 不用 )
  2. 应用插件 Vue.use(VueRouter)
  3. 编写 router 配置项
js
import VueRouter from 'vue-router'			// 引入VueRouter
import About from '../components/About'		// 路由组件
import Home from '../components/Home'		// 路由组件

// 创建router实例对象，去管理一组一组的路由规则
const router = new VueRouter({
	routes:[
		{
			path:'/about',
			component:About
		},
		{
			path:'/home',
			component:Home
		}
	]
})

//暴露router
export default router
  1. 实现切换
    • <router-link></router-link> 浏览器会被替换成 a 标签
    • acitve-class 可配置高亮样式
vue
<router-link active-class="active" to="/about">About</router-link>
  1. 指示定位 <router-view></router-view>

image.png

src/router/index.js （ 该文件专门用于创建整个应用的路由器 ） ​

vue
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
		}
	]
})

src/main.js ​

js
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'	// 引入VueRouter
import router from './router'				// 引入路由器

Vue.config.productionTip = false

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

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

src/App.vue ​

vue
<template>
  <div>
    <div class="row">
      <div class="col-xs-offset-2 col-xs-8">
        <div class="page-header"><h2>Vue Router Demo</h2></div>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-2 col-xs-offset-2">
        <div class="list-group">
					<!-- 原始html中我们使用a标签实现页面的跳转 -->
          <!-- <a class="list-group-item active" href="./about.html">About</a> -->
          <!-- <a class="list-group-item" href="./home.html">Home</a> -->

					<!-- Vue中借助router-link标签实现路由的切换 -->
					<router-link class="list-group-item" 
                       active-class="active" to="/about">About</router-link>
          <router-link class="list-group-item" 
                       active-class="active" to="/home">Home</router-link>
        </div>
      </div>
      <div class="col-xs-6">
        <div class="panel">
          <div class="panel-body">
						<!-- 指定组件的呈现位置 -->
            <router-view></router-view>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
	export default {
		name:'App'
	}
</script>

src/components/Home.vue ​

vue
<template>
	<h2>我是Home的内容</h2>
</template>

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

src/components/About.vue ​

vue
<template>
	<h2>我是About的内容</h2>
</template>

<script>
	export default {
		name:'About'
	}
</script>

32.4 几个注意事项 ​

  1. 路由组件通常放在 pages 文件夹，一般组件通常放在components 文件夹 如：

    src/pages/Home.vue

    src/pages/About.vue

    src/router/index.js

    src/componenets/Banner.vue

    src/App.vue

  2. 通过切换，"隐藏" 了路由组件，默认是被销毁掉的，需要的时候再去挂载

  3. 每个组件都有自己的 $route 属性，里面存储这自己的路由信息

  4. 整个应用只有一个 router，可以通过组件的 $router 属性获取到

js
// 该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
import Home from '../pages/Home'
import About from '../pages/About'

export default new VueRouter({
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home
        }
    ]
})
vue
<template>
    <div class="col-xs-offset-2 col-xs-8">
        <div class="page-header"><h2>Vue Router Demo</h2></div>
    </div>
</template>

<script>
    export default {
        name:'Banner'
    }
</script>
vue
<template>
  <div>
    <div class="row">
      <Banner/>
    </div>
    <div class="row">
      <div class="col-xs-2 col-xs-offset-2">
        <div class="list-group">
          <!-- 原始html中我们使用a标签实现页面跳转 -->
          <!-- <a class="list-group-item active" href="./about.html">About</a>
           <a class="list-group-item" href="./home.html">Home</a> -->
          <!-- Vue中借助router-link标签实现路由的切换 -->
          <router-link class="list-group-item" active-class="active" to="/about">
            About</router-link>
          <router-link class="list-group-item" active-class="active" to="/home">
            Home</router-link>
				</div>
			</div>
			<div class="col-xs-6">
				<div class="panel">
					<div class="panel-body">
						<!-- 指定组件的呈现位置 -->
                        <!-- 💖💖💖 -->
						<router-view></router-view>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import Banner from './components/Banner.vue'
	export default {
		name:'App',
		components:{ Banner }
	}
</script>

32.5 多级路由 ​

  1. 配置路由规则，使用 children 配置项
js
routes:[
	{
		path:'/about',
		component:About,
	},
	{
		path:'/home',
		component:Home,
		children:[ 					// 通过children配置子级路由
			{
				path:'news', 		// 此处一定不要带斜杠，写成 /news
				component:News
			},
			{
				path:'message',	// 此处一定不要写成 /message
				component:Message
			}
		]
	}
]
  1. 跳转 ( 要写完整路径 )
vue
<router-link to="/home/news">News</router-link>

src/pages/Home.vue ​

vue
<template>
	<div>
		<h2>Home组件内容</h2>
		<div>
			<ul class="nav nav-tabs">
				<li><router-link class="list-group-item" 
                       active-class="active" to="/home/news">News</router-link></li>
				<li><router-link class="list-group-item" 
                       active-class="active" to="/home/message">Message</router-link></li>
			</ul>
			<router-view></router-view>
		</div>
	</div>
</template>

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

src/pages/News.vue ​

vue
<template>
    <ul>
        <li>news001</li>
        <li>news002</li>
        <li>news003</li>
    </ul>
</template>

<script>
    export default {
        name:'News'
    }
</script>

src/pages/Message.vue ​

vue
<template>
    <ul>
        <li>
            <a href="/message1">message001</a>&nbsp;&nbsp;
        </li>
        <li>
            <a href="/message2">message002</a>&nbsp;&nbsp;
        </li>
        <li>
            <a href="/message/3">message003</a>&nbsp;&nbsp;
        </li>
    </ul>
</template>

<script>
    export default {
        name:'News'
    }
</script>

src/router/index.js ​

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:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home,
            children:[
                {
                    path:'news',
                    component:News
                },
                {
                    path:'message',
                    component:Message
                }
            ]
        }
    ]
})

image.png

Powered by VitePress & Vue 3

Copyright © 2024 BoluoBook