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