一、起步
1.1、ES5实现局部页面路由跳转
目的：单页面中实现局部路由跳转
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 引入vue以及vue-router的js文件 --> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> </head> <body> <!-- 定义挂载点 --> <div id="app"> <h1>Hello App!</h1> <p> <!-- router-link标签：表示跳转的路径对应着 --> <router-link to="/foo">Go to Foo</router-link> <router-link to="/bar">Go to Bar</router-link> </p> <!-- 路由出口：与路由匹配的组件将在此处渲染,直接会替换掉该标签(默认渲染第一个路由组件) --> <router-view></router-view> </div> <script> //1、定义route(路由组件)，可被导出到其他文件 const Foo = { template: '<div>foo</div>' } const Bar = { template: '<div>bar</div>' } //2、定义一些路由(数组存储对象形式)，每一个路由需要对应者一个组件，这些组件可通过示例对象创建如：Vue.extend()或对象组成组件(如上面的{template:xxx}对应) //之后再来介绍嵌套路由 const routes = [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar } ] //3、可通过new VueRouter来创建实例，可以传入多个选项，这里就传入路由数组即可 const router = new VueRouter({ routes // short for `routes: routes` }) //4、创建并挂载vue实例，确保要将路由实例进行注入能够得到感知 const app = new Vue({ router }).$mount('#app') </script> </body> </html>
二、通过vue-cli使用vue-router组件
2.1、哈希路由
构建项目
step1：创建vue-cli，输入vue create xxx
step2：选择手动勾选项目，添加router组件。
哈希路由分析
哈希路由：根据url的不同展示内容不同。
/#/xxx，其中xxx不同当前页面会根据指定的router标签来进行页面的局部刷新。 异步路由理解：只有当访问指定异步路由组件的时候才进行资源的引入加载操作！一般的话都会直接先去加载！ 示例： component: () => import(/* webpackChunkName: "about" */ '../views/About.vue') router/index.js：路由配置js文件 import { createRouter, createWebHashHistory } from 'vue-router' import Home from '../views/Home.vue' import Login from '../views/Login.vue' // 定义路由规则，url对应组件 const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', // 异步路由 component: () => import(/* webpackChunkName: "about" */ '../views/About.vue') }, { path: '/login', name: 'Login', component: Login }, ] // 创建路由 const router = createRouter({ history: createWebHashHistory(), routes }) export default router
main.js：使用路由
核心文件：App.vue
<template> <div id="nav"> <!-- 路径跳转，to指定路由规则中的path，当点击时对应的component组件在router-view标签中显示 --> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> | <router-link to="/login">Login</router-link> </div> <router-view /> </template> <style> </style>
