Vue3 ( Router ) -5

1.Router

Router负责分配工作
http://img2.58codes.com/2024/20137684CnJSg8q68e.png

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

前端路由 #模拟路径
可部分渲染
http://img2.58codes.com/2024/20137684cqafQRlJbx.png
http://img2.58codes.com/2024/20137684tvp94PNC0o.png

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/vue-router@4.0.5/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>

http://img2.58codes.com/2024/201376840wDBx3FJyr.png

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

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

http://img2.58codes.com/2024/20137684NKFTjXkJUW.png


3.Router CLI下执行

(1)建立专案

vue create vue-router(专案名称)

会多一个问题
http://img2.58codes.com/2024/20137684dqC2bqXmRM.png

? 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版本的差异

伺服器执行方式
http://img2.58codes.com/2024/20137684HtH32aFFKF.png
http://img2.58codes.com/2024/20137684OWTi3tsF6V.png

(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 />

http://img2.58codes.com/2024/20137684deGB1vPg4y.png

(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.巢状路由

http://img2.58codes.com/2024/20137684ULDXMKIuZL.png

目标:将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关係图
http://img2.58codes.com/2024/201376841DdocO8oAB.png


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

视图
http://img2.58codes.com/2024/201376848UL1nMdUTM.png

(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"),              },            },          ]        }

http://img2.58codes.com/2024/20137684EMaXzyONGU.png

(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.动态路由 (透过参数决定路由内容)

使用时机:各产品页面
http://img2.58codes.com/2024/201376848p32zv4h3u.png

目标:用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

http://img2.58codes.com/2024/201376844VHc1kRDEr.png

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

http://img2.58codes.com/2024/20137684nIw5aQwYHv.png


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{    }  }

关于作者: 网站小编

码农网专注IT技术教程资源分享平台,学习资源下载网站,58码农网包含计算机技术、网站程序源码下载、编程技术论坛、互联网资源下载等产品服务,提供原创、优质、完整内容的专业码农交流分享平台。

热门文章