Vue3 ( Router ) -5

1.Router

Router负责分配工作

後端路由
全部的页面传递(同大专)

前端路由 #模拟路径
可部分渲染

1.引入Vue Router
2.定义元件
3.定义路由表
4.加入对应连结(给使用者可以切换页面)

Vue Router 相关资源
官方文件：https://next.router.vuejs.org/

中文版官方文件：https://next.router.vuejs.org/zh/index.html

注意：Vue 3 搭配的 Router 版本在网址中会有 "next" 的字样
如：router.vuejs.org 则是 Vue 2 版本的路由

2.Router 纯 HTML下执行方式

1.引入Vue Router

     <script src="https://unpkg.com/[email protected]/dist/vue-router.global.js"></script>

            const router = VueRouter.createRouter({
              // 网址路径模式：使用网址 hash(#/) 的形式
              // http://127.0.0.1:5501/router/vue-router.html#/
              history: VueRouter.createWebHashHistory(),
              // 汇入路由表
              routes: [],
            });

            app.use(router);
            app.mount("#app");

2.定义元件

            const componentA = {
              template: `<div>AAAAAAAAAAAA</div>`,
            };

            const componentB = {
              template: `<div>BBBBBBBBBBBB</div>`,
            };

3.定义路由表

             const router = VueRouter.createRouter({
              // 网址路径模式：使用网址 hash(#/) 的形式
              // http://127.0.0.1:5501/router/vue-router.html#/
              history: VueRouter.createWebHashHistory(),

              // 汇入路由表
              routes: [
                {
                  // 路径
                  path: "/a",
                  // 放这个元件
                  component: componentA,
                },
                {
                  // 路径
                  path: "/b",
                  // 放这个元件
                  component: componentB,
                },
              ],
            });

并加入显示标签，固定写法

            <router-view></router-view>

4.加入对应连结(给使用者可以切换页面)

            <router-link to="/a"></router-link>
            <router-link to="/b"></router-link>

3.Router CLI下执行

(1)建立专案

vue create vue-router(专案名称)

会多一个问题

? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) N

**与HTML版本的差异

服务器执行方式

(2)新增页面元件，放入App.vue
技巧：先制作元件再Router

2-1. 在View下新增页面元件 NewPage.vue (定义元件)

<template>
    <div>
        我是新增页面
    </div>
</template>

2-2. 把页面跟Router绑一起 (定义路由表)
Router > index.js

const routes = [
  {
    path: "/newpage",
    name: "新增页面",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/NewPage.vue"),
  }
];

2-3. 加入对应连结(给使用者可以切换页面)
App.vue

  <!-- 动态属性的方式加入 :to="" -->
  <router-link :to="{
    name: '新增页面'
  }"> | 新增页面</router-link>
  </div>
  <router-view />

(3)专案放入BS样式

3-1. public > index.html CDN BS 的 CSS
https://getbootstrap.com/

3-2 App.vue增加BS Navbar样式

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

3-2 把router-link加到BS Navbar样式

      <router-link class="nav-link" to="/">Home</router-link>

3-3增加 BS container 样式 到页面下方

<div class="container">
<router-view></router-view>
</div>

4.巢状路由

目标：将componentA、componentB放到NewPage.vue下

(1)在View下新增页面元件 componentA、componentB (定义元件)

<template>
    <div>
        元件AAAAAAAAAAAA
    </div>
</template>

<template>
    <div>
        元件BBBBBBBBBBBB
    </div>
</template>

2-2. 把子项目跟Router绑一起 (定义路由表)
Router > index.js

    path: "/newpage",
    name: "新增页面",
    // route levsSel code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/NewPage.vue"),
      //放入子项目
      children:[
        // 同上方结构
        // 子路径无须 /********************************
        {
          path: "a",
        component: () =>
        import( "../views/componentA.vue"),

        },
        {
          path: "b",
        component: () =>
        import( "../views/componentB.vue"),
        
        },
      ],

指定渲染的位置
view > NewPage.vue

<template>
<div>
    <div>我是新增页面</div>
      <div class="row">
        <div class="col-4">选单</div>
        <div class="col-8">
            <!-- 渲染 -->
            <router-view></router-view>
        </div>
      </div>
</div>
</template>

2-3. 加入对应连结(给使用者可以切换页面)

view > NewPage.vue

使用BS样式
https://getbootstrap.com/docs/4.6/components/list-group/#links-and-buttons

router-link + to="哪里"

  <router-link to="/newpage/a" 
    href="#" class="list-group-item list-group-item-action" aria-current="true">
    元件A
  </router-link>

    <router-link to="/newpage/b" 
       href="#" class="list-group-item list-group-item-action" aria-current="true">
    元件B
  </router-link>

Router关系图

5.一个元件插入多个视图 - 具名视图

视图

(1)建立包住画面元件NamedView.vue (定义元件)
内制作多个router-view

view > NamedView.vue

<template>
<div>
    <h2>命名视图</h2>
    <div class="row">
        <div class="row-6">
            <!-- 左边 -->
            <router-view name="left"></router-view>
        </div>

        <div class="row-6">
            <!-- 右边 -->
            <router-view name="right"></router-view>
        </div>
    </div>
 </div>
</template>

(2)与Router绑一起 (定义路由表)
Router > index.js

         {
          // 命名视图
          // http://localhost:8080/#/newpage/namedView
          path:'namedView',
          component: () =>
          import( "../views/NamedView.vue"),
          children:[
            {
              path:'c2a',
              // 命名视图内的两个元素放进来，所以component"s"
              components: {
                left: () => import( "../views/componentC.vue"),
                right: () => import( "../views/componentA.vue"),
              },
            },
            {
              path:'a2b',
              // 命名视图内的两个元素放进来，所以component"s"
              components: {
                left: () => import( "../views/componentA.vue"),
                right: () => import( "../views/componentB.vue"),
              },
            },
          ]
        }

(3)加入对应连结(给使用者可以切换页面)

view > NewPage.vue

      <router-link to="/newpage/namedView" 
      href="#" class="list-group-item list-group-item-action" aria-current="true">
               命名视图
             </router-link>
      <router-link to="/newpage/namedView/c2a" 
      href="#" class="list-group-item list-group-item-action" aria-current="true">
               命名视图c2a
             </router-link>
      <router-link to="/newpage/namedView/a2b" 
      href="#" class="list-group-item list-group-item-action" aria-current="true">
               命名视图a2b
             </router-link>

6.动态路由 (透过参数决定路由内容)

使用时机：各产品页面

目标：用ajax(axios套件)抓API的值，将该值放入网址列，并显示相对应资料

(1)安装axios套件

npm i axios

(2)建立画面元件 DynamicRouter.vue (定义元件)
制作抓API的元件
API：https://randomuser.me/

// 汇入axios套件
  import axios from 'axios';
  export default {
     created() {
         const seed ="6f2687a207a1451f"
         // https://randomuser.me/api
         // 固定网址列
         axios.get(`https://randomuser.me/api/?seed=${seed}`)
         .then((res) =>{
             console.log("最大范围查找" , res);
             console.log("下一层data" , res.data);
             console.log("抓类似id的值：" , res.data.info.seed);
         })
     },

(2)与Router绑一起 (定义路由表)
Router > index.js

此时想要抓动态网址列

        {
          // /:id抓动态网址列值
          path:"dynamicRouter/:id",
          component: () =>
          import( "../views/DynamicRouter.vue"),
        },

(3)加入对应连结(给使用者可以切换页面)
view > NewPage.vue

          <router-link to="/newpage/dynamicRouter/6f2687a207a1451f" 
          href="#" class="list-group-item list-group-item-action" aria-current="true">
               抓API网址列
             </router-link>

(3)前述(2)是抓固定网址列，将其变更为以下
使用$route可以抓住网址列/:id後的值，并回传

    const seed =this.$route.params.id;

结论：动态id抓取方式

方法1.
Router > index.js

:id

须配合

View > DynamicRouter.vue

this.$route.params.id

所以手动输入网址列也能抓到值，此处是为了方便直接设定router-link

方法2. 或是直接用props传id值

7.路由方法 档案 View > RouterNavigation.vue

路由方法：https://next.router.vuejs.org/zh/api/#router-方法
路由属性：https://next.router.vuejs.org/zh/api/#routelocationnormalized

8.预设路径以及重新导向

Vue执行下，路径错误

(1)404告知制作 及

  {
    path:'/:pathMatch(.*)*',  //全部的母层及子层
    component: () =>
    import( "../views/NotFound.vue"),
  },

(2)重新导向

  {
    path:'/newPage/:pathMatch(.*)*',  //newPage下全部的母层及子层
    redirect:{
      name:'Home'
    }
  },

9.路由设定选项

路由选项：https://next.router.vuejs.org/zh/api/#routeroptions

const router = createRouter({
  history: createWebHashHistory(),
  routes,

  // 路由选项：https://next.router.vuejs.org/zh/api/#routeroptions

  linkActiveClass: 'active', //active BS样式 易於辨识用

  scrollBehavior(to, from, savedPosition) {
    // `to` 和 `from` 都是路由地址
    // `savedPosition` 滚轮的位置。
    console.log("to", to,"from", from,"savedPosition", savedPosition)
    if (to.fullPath.match('newpage')){
      return{
        top:0,
      }
    }
    return{
    }
  }