VUE3.0,DAY62，VUE初识路由

2024-02-06 18:31:46

VUE3.0,DAY62

路由简介
vue-router的相关理解
路由的理解
案例展示
注意点
小结
嵌套（多级）路由

路由简介

生活中的路由器可以看作如下所示。

那么路由的概念就是如下：就是一个对应关系，路由(route），多个路由通过一个路由器（router）进行管理。

路由的应用在vue中叫SPA（single page web application）应用，即单页面应用。

vue-router的相关理解

路由的理解

案例展示

使用vue脚手架，在components文件夹下新建Home.vue和About.vue。并修改App.vue的代码。首先在public文件下的index.html中引入第三方样式。

<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">

  <!--针对IE浏览器的一个特殊配置，让IE浏览器以最高的渲染级别渲染页面-->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--开启移动端的理想视口-->
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <!--配置页签的图标-->
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <!-- 引入第三方样式 -->
  <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
  </script>
  <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
  <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <!-- Bootstrap -->
  <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">


  <!--配置网页标题，中间的内容就是使vue找到package-lock.json中一个name值做网站名字-->
  <title>
    <%= htmlWebpackPlugin.options.title %>
  </title>
</head>

<body>
  <!--如果浏览器不支持js，那么就会出现strong标签中的话-->
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
        Please enable it to continue.</strong>
  </noscript>

  <!--容器-->
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>

</html>

继续安装vue-router。开启命令行窗口，输入npm i vue-router。并且还需要在main.js内引入这个类似于插件的东西。

main.js内代码如下：

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入vuerouter
import VueRouter from 'vue-router'

//引入路由器
import router from './router/index'
//关闭Vue的生产提示
Vue.config.productionTip = false


//应用插件
Vue.use(VueRouter)
//创建vm
new Vue({
	el: '#app',
	render: h => h(App),
	router: router
})

在src文件夹下新建一个router的文件夹。里边新建一个index.js。代码如下

// 该文件专门用于创建整个应用的路由器
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
		}
	]
})

最后输出效果如下，点击About或者Home时，地址栏的内容会相对应的改变：

注意点

我们的About与Home是路由组件，与一般自定义组件不同，一般自定义组件的使用，需要在APP.vue中先引入然后注册，在使用。路由组件是靠路由器进行匹配，然后使用相应的路由标签进行渲染在页面上。

小结

嵌套（多级）路由

首先修改index.js内的代码，进行嵌套路由的创建。

// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../components/About'
import Home from '../components/Home'
import News from '../components/News'
import Message from '../components/Message'
//创建并暴露一个路由器
export default new VueRouter({
    routes: [
        //前两个是一级路由，嵌套的话，是在一级路由里边在写新路由
        {
            path: '/about',
            component: About
        },
        {
            path: '/home',
            component: Home,
            // 下边是嵌套的二级路由，path中不用加/符号
            children: [
                {
                    path: 'news',
                    component: News,
                },
                {
                    path: 'message',
                    component: Message,
                }
            ]
        }
    ]
})

Home.vue代码

<template>
	<div>
		<h2>Home组件内容</h2>
		<div>
			<ul class="nav nav-tabs">
				<li>
					<!-- 如果我们要to，去的地址是一个子路由，那么就得在to后边写上他的父级路径 -->
					<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',
		/* beforeDestroy() {
			console.log('Home组件即将被销毁了')
		}, */
		/* mounted() {
			console.log('Home组件挂载完毕了',this)
			window.homeRoute = this.$route
			window.homeRouter = this.$router
		},  */
	}
</script>

Message.vue代码

<template>
  <div>
    <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>
  </div>
</template>

<script>
export default {
  name: "Message",
};
</script>

News.vue代码

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

<script>
export default {
  name: "News",
};
</script>

App.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";
export default {
  name: "App",
  components: { Banner },
};
</script>

banner.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>

其他文件代码不用修改，最后的效果就是我们点击Home，里边又出现了两个新的标题，News和Message。输出如下：

码农公寓