vue-Router路由的简介、配置以及嵌套路由

我叫WJP

于 2024-05-15 10:42:21 发布

阅读量413

点赞数 9

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_70495659/article/details/138898178

版权

介绍

Vue Router 是 Vue.js 官方的路由管理器，它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。它的主要功能包括：

嵌套的路由/视图表：可以使用嵌套路由配置来表达多层嵌套的组件组合关系。
模块化的、基于组件的路由配置：将每条路由映射到应该显示的组件上。
路由参数、查询、通配符：支持动态路径参数，可将某种模式匹配到的所有路由，全都映射到同个组件。
基于 Vue.js 过渡系统的视图过渡效果：可以实现页面切换时的过渡效果。
细粒度的导航控制：可以拦截任何导航并更精确地控制其结果。
带有自动激活的 CSS class 的链接：链接元素会自动设置一个表示激活的 CSS 类名。
HTML5 历史模式或 hash 模式，在 IE9 中自动降级：支持 HTML5 历史模式或 hash 模式，在 IE9 中会自动降级使用 hash 模式。
自定义的滚动条行为：可以精确控制每个页面的滚动位置。

配置

1.安装 Vue Router：使用 npm 安装 Vue Router，打开终端并在项目目录下执行以下命令：

npm install vue-router

2.导入 Vue Router：在main.js文件中导入 Vue Router，并使用Vue.use方法将其注册为 Vue 的插件：

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);

3.创建路由实例：在main.js文件中创建一个路由实例，并配置路由规则：

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

Vue.use(VueRouter);

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

const router = new VueRouter({
  mode: 'history', // 使用 HTML5 的 history 模式，去除 URL 中的"#"
  routes
});

4.挂载路由实例：在main.js文件中将路由实例挂载到 Vue 实例上：

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

5.配置路由出口：在 Vue 的根组

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

嵌套路由

在 Vue.js 中，路由嵌套是指在当前路由中注册子路由，形成父子结构，显示子路由对应的组件。通过嵌套路由，可以在一个路由的页面下，继续使用路由加载新的组件。可以将嵌套路由理解为父子路由，常见的多导航界面通常就是由多层嵌套的组件组合而成。

下面是实例代码演示：

定义了三个组件：Index、Order 和 Foods，其中 Foods 组件是一个嵌套路由组件，它的路由表中有一个 children 属性，该属性是一个数组，里面包含了子组件的路径。在组件中使用<router-link>标签来定义路由链接，通过to属性指定链接的目标路由，在组件中使用<router-view>标签来显示匹配的组件。

<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Document</title>
<style>
nav{
position:fixed;
display:flex;
width:100%;
bottom:0;
nav{
color:blue;
flex-grow:1;
height:80px;
line-height:80px;
text-align:center;
border:solid 1px blue
nav.active{
background-color: blue;
color:#fff;
</style>
</head>
<body>
<divid="app">
<router-view></router-view>
<nav>
<router-linkto="/">首页</router-link>
<router-linkto="/order">订单</router-link>
<router-linkto="/foods">美食</router-link>
</nav>
</div>
<scriptsrc="../js/vue.js"></script>
<scriptsrc="vue-router.js"></script>
<script>
var Index={
template:`<div>这是首页中的内容</div>`,
};
var Order={
template:`<div>这是订单中的内容</div>`,
};
var Foods={
template:`<div>这是foods中的内容
<router-linkto="/foods/cake">蛋糕</router-link>
<router-linkto="/foods/rice">大米</router-link>
<router-linkto="/foods/egg">鸡蛋</router-link>
<router-view></router-view>
</div>`,
};
var Cake={
template:`<div>这是蛋糕页面的内容</div>`,
};
var Rice={
template:`<div>这是大米页面的内容</div>`,
};
var Egg={
template:`<div>这是鸡蛋页面的内容</div>`,
};
var routes=[
{path:'/',component:Index},
{path:'/order',component:Order},
{path:'/foods',component:Foods,children:[
{path:'/foods/',redirect:'cake'},
{path:'/foods/rice',component:Rice},
{path:'/foods/egg',component:Egg},
{path:'/foods/cake',component:Cake}
]}
];
var router=new VueRouter({
mode:'history', // 使用 HTML5 的 history 模式，去除 URL 中的"#"
routes
});
var vm=new Vue({
el:'#app',
data:{},
methods:{},
components:{},
router
});
</script>
</body>
</html>