vue router 配置路由的方法

2024-05-06 15:32:26

字体：大中小

来源：转载

供稿：网友

用 Vue.js + vue-router 创建单页应用，是非常简单的。使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 vue-router 添加进来，我们需要做的是，将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。

路由的基本实现

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style>  /* 实现当前 路由导航高亮 */  .router-link-exact-active, .router-link-active {   color: red;   font-size: 30px;  } </style> </head><body> <div id="app">  <!-- 路由的入口，也就是a标签 -->  <router-link to="/home">home</router-link>  <router-link to="/about">about</router-link>  <!-- 指定页面中路由的出口，也就是：路由匹配组件将来展示在页面中的位置 -->  <router-view></router-view> </div> <script src="./vue.js"></script> <!-- 引入 路由插件 --> <script src="./node_modules/vue-router/dist/vue-router.js"></script> <script>  /*    路由的使用步骤：   1 引入 路由插件的js文件   2 创建几个组件   3 通过 VueRouter 来创建一个路由的实例，并且在参数中配置好路由规则   4 将 路由实例 与 Vue实例关联起来，通过 router 属性   5 在页面中使用 router-link 来定义导航（a标签） 路由路口   6 在页面中使用 router-view 来定义路由出口（路由内容展示在页面中的位置）   */  // Vue中的路由是：哈希值 和 组件的对应关系  // component 方法能够返回一个对象，用这个对象就可以表示当前组件  const Home = Vue.component('home', {   template: `<h1>这是 Home 组件</h1>`  })  const About = Vue.component('about', {   template: `<h1>这是 About 组件</h1>`  })  // 配置路由规则  const router = new VueRouter({   // 通过 routes 来配置路由规则，值：数组   routes: [    // 数组中的每一项表示一个具体的路由规则    // path 用来设置浏览器URL中的哈希值    // componet 属性用来设置哈希值对应的组件    { path: '/home', component: Home },    { path: '/about', component: About },    // redirect 重定向: 让当前匹配的 / ,跳转到 /home 对应的组件中, 也就是默认展示: home组件    { path: '/', redirect: '/home' }   ]  })  var vm = new Vue({   el: '#app',   // Vue的配置对象中有一个配置项叫做：router   // 用来指定当前要使用的路由   // router: router   router  }) </script></body></html>

重定向

解释：将 / 重定向到 /home