Vue 路由

一.路由基本

1. 安装包：

npm install --save vue-router

2. 首先我们在 router 文件夹里面引入资源：

import {createRouter,createrWebHashHistory} from "vue-router"

3. 引入对应的界面，如：

import HomeView from '../views/HomeView.vue'
import AboutView from '../views/AboutView.vue'

4. 进行相关配置:

const routes = [

  {
    path :"/",  // 表示通过path:"/"访问HomeView
    component:HomeView
  },
  {
    path:"/about",
    component:AboutView
  }
]

5. 导出：

export default router

6. 对应router/index.js代码：

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import AboutView from '../views/AboutView.vue'

const routes = [

  {
    path :"/",
    component:HomeView
  },
  {
    path:"/about",
    component:AboutView
  }
]
const router = createRouter({

  history:createWebHistory(),
  routes
})

export default router

7. main.js 对应的代码添加：

import router from './router'
createApp(App).use(router).mount('#app')

8. 显示与切换：

 <template>
  <router-view></router-view>
  <router-link to="/">1</router-link>|
  <router-link to="/about">2</router-link>
</template>

二. 路由传参

1. 将需要跳转的主页面（ main.js ）添加参数：

{
    path:'/news/details/:name',
    name:"details",
    component:()=>import("../views/news_details.vue")
  }

2. 将改.vue的对应添加名字：

<ul>
    <li> <router-link to="/news/details/1">新闻1</router-link> </li>
    <li> <router-link to="/news/details/2">新闻2</router-link> </li>
    <li> <router-link to="/news/details/3">新闻3</router-link> </li>
</ul>

3. 展示：

<template>
    <h3>新闻</h3>
    <p>{{$route.params.name}}</p> 
</template>

三. 嵌套路由

1.在父路由添加子路由：

 {
    path:"/about",
    component:AboutView,
    children:[
      {
        path:"us",
        component:()=> import("../views/about/aboutus.vue")
      },
      {
        path:"info",
        component:()=>import("../views/about/aboutinfo.vue")
      }
    ]
  },

2.在该父路由的 template 中添加<router-view></router-view>
3.链接：

<router-link to="/about/us">关于我们</router-link>|
<router-link to="/about/info">关于信息</router-link>