【Vue路由详细介绍】

1. 路由

Vue路由是通过Vue Router这个官方库来实现的，它是Vue.js的一个插件，提供了在单页应用中通过不同的URL访问不同的内容而无需重新加载页面的能力，无论是Vue 2.x还是Vue 3.x，Vue Router都是处理路由的首选方式，但两者在使用和配置上可能会略有不同。

以下是Vue Router的一些核心概念和功能：

2. 使用路由建立多视图单页应用

2.1 引入依赖库

建立一个基本html项目，创建一个demo页面并引入一下js库文件

2.2 创建自定义组件

创建vue组件有两种方式：

• var MyComonent = Vue.component(“button-counter”, {…});
  创建一个vue组件并赋给MyComponent变量
• const Home = Vue.extend({});
  extend是构造一个组件的语法器. 你给它参数，他给你一个组件,然后这个组件你可以作用到Vue.component这个全局注册方法里，也可以在任意vue模板里使用

相关知识点：
js中const,var,let区别？分别写一个例子
创建一个Home组件和About组件

//组件名用PPascalCase风格
const Home = Vue.extend({
    //必须定义一个根元素作为容器,包裹模板中的内容元素
    template: '
Home组件
Home组件内容区
'
});

const About = Vue.extend({
    //必须定义一个根元素作为容器,包裹模板中的内容元素
    template: '
About组件
About组件内容区
'
});

2.3 创建路由

2.3.1 什么是路由

vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。

传统的页面应用，是用一些超链接来实现页面切换和跳转的，在vue-router单页面应用中，则是路径之间的切换，实际上就是组件的切换。

路由就是SPA（单页应用）的路径管理器，再通俗的说，vue-router就是我们WebApp的链接路径管理系统。

route和router的区别

• route：路线
• router：路由器
• 路由器中包含了多个路线

2.3.2 定义路由

//定义路由，"/"代表根路径，路由中可以使用name属性，一遍情况不建议使用
var routes = [
    {path: '/home',component: Home},
    {path: '/about',component: About}
];

//创建路由器实例
const router = new VueRouter({
    routes: routes
});

2.4 创建和挂载根实例

使用路由后，Vue实例的创建于以前会有一定的区别，原来使用el属性指定边界，使用路由后需要使用Vue实例$mount方法挂载根实例

//创建和挂载根实例
var vm = new Vue({
    //el: '#app',
    //将路由放入vue实例
    router: router,
    data: {
        ts: new Date().getTime()
    }
}).$mount("#app");

2.5 使用RouterLink和RouterView组件导航与显示

<div>
    <router-link to="/home">go to Home</router-link>
    <router-link to="/about">go to aboue</router-link>
</div>
<div>
     <router-view></router-view>
</div>

路由内容显示区域。

3. 安装和设置

要开始使用Vue Router，首先需要安装它：

npm install vue-router

接着，你需要导入Router，创建路由实例，并将其传递到Vue实例中：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

// 定义一些路由
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
  routes // (缩写) 相当于 routes: routes
})

// 创建和挂载根实例
const app = new Vue({
  router
}).$mount('#app')

4. 路由配置

在routes配置中，你定义了应用的路由及其对应的组件，每个路由应该映射一个组件。

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

5. 组件

用于导航的组件，给定to属性对应的路由路径，会被渲染为带有正确href属性的标签。

<router-link to="/foo">Go to Foorouter-link>
<router-link to="/bar">Go to Barrouter-link>

6. 组件

路由出口，路由匹配到的组件将渲染在这里。

<router-view>router-view>

7. 动态路由匹配

你可以通过:符号定义动态路由参数。

const routes = [
  { path: '/user/:id', component: User }
]

8. 嵌套路由

通过在路由配置中使用children数组，可以定义嵌套路由。

const routes = [
  {
    path: '/user/:id',
    component: User,
    children: [
      {
        // 当 /user/:id/profile 匹配成功，
        // UserProfile 将被渲染在 User 的  中
        path: 'profile',
        component: UserProfile
      },
      {
        // 当 /user/:id/posts 匹配成功
        // UserPosts 将被渲染在 User 的  中
        path: 'posts',
        component: UserPosts
      }
    ]
  }
]

9. 编程式导航

除了使用创建a标签来定义导航链接，还可以直接在Vue实例的方法内部使用router.push来实现。

router.push('/foo');

10. 命名路由

可以给某条路由设定一个名字，允许更加方便地进行路径的引用和跳转。

const routes = [
  { path: '/user/:userId', name: 'user', component: User }
]

// 在 Vue 实例中可以这样使用命名路由进行跳转
router.push({ name: 'user', params: { userId: '123' }})

11. 路由守卫

Vue Router 提供了全局守卫、路由独享的守卫、组件内的守卫来提供导航控制。

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

router.afterEach((to, from) => {
  // ...
})

12. 路由元信息

可以在路由配置中通过meta字段来设置路由元信息。

const routes = [
  { path: '/foo', component: Foo, meta: { requiresAuth: true } }
]

// ...
router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 此路由需要授权，请检查是否已登录
    // 如果没有，重定向到登录页面。
  } else {
    next();
  }
})

12. 滚动行为

控制路由跳转时页面的滚动行为。

const router = new VueRouter({
  routes,
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: 0 }
    }
  }
})

Vue Router 是一个功能强大的库，可以帮你在Vue应用中非常方便地实现前端路由的各种复杂需求，遵循上面的概念，你可以在Vue应用程序中构建复杂且