备案控制台
开发者社区 开发与运维 文章 正文

114.【Vue-细刷-05】（四）

2023-09-24 27
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 114.【Vue-细刷-05】

(二十九)、路由

1.相关理解

(1).vue-route的理解
  1. vue的一个插件库
  2. 专门用来实现一个SPA应用。
  3. 基于vue的项目基本都会用到此库。
  4. 中文文档: https://router.vuejs.org/
  5. 下载: npm install vue-router -S 。
(2).SPA的理解
  1. 单页面web应用 (single page web application)。
  2. 整个应用只有一个完成的页面。
  3. 点击页面中的连接不会刷新页面，只会做页面的局部更新。
  4. 数据都需呀通过ajax请求获取，并在前端异步展现。

2.路由的基本使用(一级路由)

(1).搭建静态页面

APP.vue

<template>
  <div>
    <div>
      <Header></Header>
      <div class="row">
      <div class="col-xs-2 col-xs-offset-2">
        <div class="list-group">
          <a class="list-group-item active" href="./about.html">About</a>
          <a class="list-group-item" href="./home.html">Home</a>
        </div>
      </div>
      <div class="col-xs-6">
        <div class="panel">
          <div class="panel-body">
            <About></About>
            <Home></Home>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</template>
<script>
name:'App'
import Header from './components/Header.vue'
import About from './pages/About.vue'
import Home from './pages/Home.vue'
export default {
  components:{
    Header,
    About,
    Home
  }
}
</script>
<style>
</style>

Header.vue

<template>
  <div>
        <div class="row">
      <div class="col-xs-offset-2 col-xs-8">
        <div class="page-header"><h2>React Router Demo</h2></div>
      </div>
    </div>
  </div>
</template>
<script>
name:'Header'
export default {
}
</script>
<style>
</style>

About.vue

<template>
  <div>
        <h2>about</h2>
  </div>
</template>
<script>
name:'About'
export default {
}
</script>
<style>
</style>

Home.vue

<template>
  <div>
    <h2>home</h2>
  </div>
</template>
<script>
name:'Home'
export default {
}
</script>
<style>
</style>

(2).安装vue-route

Vue2.0版本的需要下载这个

npm install  vue-router@3

如果下载最新版本的话，一i的那个会报错的。

router/index.js

在这里我们主要配置路由和路由跳转的组件

// TODO: 该文件是Vue路由器文件，路由管理着所有的路由
import Vue from 'vue'  // 引入阉割版本的vue
import VueRouter from 'vue-router'  // 引入路由插件
// TODO:引入我们需要的组件
import About from '../pages/About.vue'
import Home from '../pages/Home.vue'
Vue.use(VueRouter) // 使用路由
// 创建一个路由器，管理所有的路由
const router=new VueRouter({
    routes:[// 一堆路由。一个对象就是一个路由
        {
            path:'/home',  // 假如说访问的路径名是这个的话，我们就展示下面这个组件
            component:Home  // 组件名
        },
        {
            path:'/about',
            component:About
        },
    ],  
})
// 抛出我们创建的路由器
export default router

main.js

我们需要引入我们创建的路由

import Vue from 'vue'  // 引入阉割版本的vue
import App from './App.vue' // 引入App.vue组件
import router from './router/index'   //引入我们刚才编写的router配置
Vue.config.productionTip = false;
const vm=new Vue({
    router: router, // 传入路由
    render: h => h(App)
}).$mount('#app');
console.log('vm',vm)

App.vue

更换路由跳转标签

这里我们也不需要注册路由跳转的组件。直接由路由管理了
          <!-- 原始Html页面使用a标签进行页面跳转 -->
          <!-- <a class="list-group-item active" href="./about.html">About</a>
          <a class="list-group-item" href="./home.html">Home</a> -->
          <!-- 在Vue中使用router-link实现路径改变 -->
          <!-- router-link帮我们封装了active-class:"高亮的类名"。所以在引号里面我们添加高亮的样式即可。但因为我们引用了Bootstrap.css。有一个已经写好的active样式。所以active-class="active"-->
          <router-link class="list-group-item " active-class="active" to="/about">About</router-link>
          <router-link class="list-group-item"  active-class="active" to="/home">Home</router-link >
            <!-- <About></About>
            <Home></Home> -->
            <!-- 展示我们路径改变后的组件组件 -->
            <router-view></router-view>

<template>
  <div>
    <div>
      <Header></Header>
      <div class="row">
      <div class="col-xs-2 col-xs-offset-2">
        <div class="list-group">
          <!-- 原始Html页面使用a标签进行页面跳转 -->
          <!-- <a class="list-group-item active" href="./about.html">About</a>
          <a class="list-group-item" href="./home.html">Home</a> -->
          <!-- 在Vue中使用router-link实现路径改变 -->
          <!-- router-link帮我们封装了active-class:"高亮的类名"。所以在引号里面我们添加高亮的样式即可。但因为我们引用了Bootstrap.css。有一个已经写好的active样式。所以active-class="active"-->
          <router-link class="list-group-item " active-class="active" to="/about">About</router-link>
          <router-link class="list-group-item"  active-class="active" to="/home">Home</router-link >
        </div>
      </div>
      <div class="col-xs-6">
        <div class="panel">
          <div class="panel-body">
            <!-- <About></About>
            <Home></Home> -->
            <!-- 展示我们路径改变后的组件组件 -->
            <router-view></router-view>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</template>
<script>
name:'App'
import Header from './components/Header.vue'
// TODO: 因为这两个组件交给路由器管理了，所以这个我们可以去掉
// import About from './pages/About.vue'
// import Home from './pages/Home.vue'
export default {
  components:{
    Header,
    // About,
    // Home
  },
  mounted() {
    console.log(this)
  },
}
</script>
<style>
</style>

compoments/Header.vue

<template>
  <div>
        <div class="row">
      <div class="col-xs-offset-2 col-xs-8">
        <div class="page-header"><h2>React Router Demo</h2></div>
      </div>
    </div>
  </div>
</template>
<script>
name:'Header'
export default {
}
</script>
<style>
</style>

pages/About.vue

<template>
  <div>
        <h2>about</h2>
  </div>
</template>
<script>
name:'About'
export default {
}
</script>
<style>
</style>

pages/About.vue

<template>
  <div>
    <h2>home</h2>
  </div>
</template>
<script>
name:'Home'
export default {
}
</script>
<style>
</style>

当我们index.js里面使用到 Vue.use(Router)的时候会展示如下

3.一个路径匹配多个组件

index.js

如果我们需要在一个路径下由多个组件需要在这里引入对应的组件，并用components租车。
routes:[
        {
            path:'/home',  // 假如说访问的路径名是这个的话，我们就展示下面这个组件
            components:{
                Home, // 组件名
                Home2
            }
        },
        ]

// TODO: 该文件是Vue路由器文件，路由管理着所有的路由
import Vue from 'vue'  // 引入阉割版本的vue
import VueRouter from 'vue-router'  // 引入路由插件
// TODO:引入我们需要的组件
import About from '../pages/About.vue'
import Home from '../pages/Home.vue'
import Home2 from '../pages/Home2.vue'
Vue.use(VueRouter) // 使用路由
// 创建一个路由器，管理所有的路由
const router=new VueRouter({
    routes:[// 一堆路由。一个对象就是一个路由
        {
            path:'/home',  // 假如说访问的路径名是这个的话，我们就展示下面这个组件
            components:{
                Home, // 组件名
                Home2
            }
        },
        {
            path:'/about',
            component:About
        },
    ],  
})
// 抛出我们创建的路由器
export default router

App.vue

我们假如对试图起名字，那么我们就只能读去定名的部分。不起名字就是默认全部
  <!-- 展示我们路径改变后的组件组件 -->
  <router-view ></router-view>
  <router-view name="Home1"></router-view>
  <router-view name="Home2"></router-view>

<template>
  <div>
    <div>
      <Header></Header>
      <div class="row">
      <div class="col-xs-2 col-xs-offset-2">
        <div class="list-group">
          <!-- 原始Html页面使用a标签进行页面跳转 -->
          <!-- <a class="list-group-item active" href="./about.html">About</a>
          <a class="list-group-item" href="./home.html">Home</a> -->
          <!-- 在Vue中使用router-link实现路径改变 -->
          <!-- router-link帮我们封装了active-class:"高亮的类名"。所以在引号里面我们添加高亮的样式即可。但因为我们引用了Bootstrap.css。有一个已经写好的active样式。所以active-class="active"-->
          <router-link class="list-group-item " active-class="active" to="/about">About</router-link>
          <router-link class="list-group-item"  active-class="active" to="/home">Home</router-link >
        </div>
      </div>
      <div class="col-xs-6">
        <div class="panel">
          <div class="panel-body">
            <!-- <About></About>
            <Home></Home> -->
            <!-- 展示我们路径改变后的组件组件 -->
            <router-view ></router-view>
            <router-view name="Home1"></router-view>
            <router-view name="Home2"></router-view>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</template>
<script>
name:'App'
import Header from './components/Header.vue'
// TODO: 因为这两个组件交给路由器管理了，所以这个我们可以去掉
// import About from './pages/About.vue'
// import Home from './pages/Home.vue'
export default {
  components:{
    Header,
    // About,
    // Home
  },
  mounted() {
    console.log(this)
  },
}
</script>
<style>
</style>

4.二级、三级路由

(1).二级路由

Messages.vue

<template>
  <div>
    <ul>
      <li><a href="/message1">message001</a>&nbsp;&nbsp;</li>
      <li><a href="/message2">message002</a>&nbsp;&nbsp;</li>
      <li><a href="/message/3">message003</a>&nbsp;&nbsp;</li>
    </ul>
  </div>
</template>
<script>
export default {
    name:'message',
};
</script>
<style>
</style>

News.vue

<template>
  <div>
    <ul>
      <li>news001</li>
      <li>news002</li>
      <li>news003</li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "New",
};
</script>
<style>
</style>

index.js

1.我们在这里引入: 二级目录的组件。
然后在一级目录下的属性写上 ： Children:[{}]
2.路径的两种写法:
(1). path: '/home/message', //因为我们是二级目录所以我们需要加上上一级目录。
(2).path: 'message',  我们可以把前面的目录和/一起删除.
children: [ // TODO: 因为是一级路由的子目录所以放在children这个数组种
                {
                    path: '/home/message', //因为我们是二级目录所以我们需要加上上一级目录
                    component: Messages
                },
                {
                    path: '/home/News', //因为我们是二级目录所以我们需要加上上一级目录
                    component: News
                },
            ]

// TODO: 该文件是Vue路由器文件，路由管理着所有的路由
import Vue from 'vue'  // 引入阉割版本的vue
import VueRouter from 'vue-router'  // 引入路由插件
// TODO:引入我们需要的组件
import About from '../pages/About.vue'
import Home from '../pages/Home.vue'
// TODO: 引入我们的二级、三级目录
import News from '../pages/New.vue'
import Messages from '../pages/Messages.vue'
Vue.use(VueRouter) // 使用路由
// 创建一个路由器，管理所有的路由
const router = new VueRouter({
    routes: [// 一堆路由。一个对象就是一个路由
        {
            path: '/home',  // 假如说访问的路径名是这个的话，我们就展示下面这个组件
            component: Home,  // 组件名
            children: [ // TODO: 因为是一级路由的子目录所以放在children这个数组种
                {
                    path: '/home/message', //因为我们是二级目录所以我们需要加上上一级目录
                    component: Messages
                },
                {
                    path: '/home/News', //因为我们是二级目录所以我们需要加上上一级目录
                    component: News
                },
            ]
        },
        {
            path: '/about',
            component: About
        },
    ],
})
// 抛出我们创建的路由器
export default router

Home.vue

1.接受:
        <li>
          <router-link
            class="list-group-item"
            active-class="active"
            to="/home/News"    //  这里只有一种形式 几级就有几个/
            >News</router-link
          >

<template>
  <div>
    <h2>Home组件内容</h2>
    <div>
      <ul class="nav nav-tabs">
        <li>
          <router-link
            class="list-group-item"
            active-class="active"
            to="/home/News"
            >News</router-link
          >
        </li>
        <li>
          <router-link
            class="list-group-item"
            active-class="active"
            to="/home/message"
            >Message</router-link
          >
        </li>
      </ul>
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
name: "Home";
export default {};
</script>
<style>
</style>
(2).三级目录

Details.vue

创建第三级目录

<template>
  <div>
    <ul>
        <li>ID: ??</li>
        <li>Title: ??</li>
        <li>CONTENT: ??</li>
    </ul>
  </div>
</template>
<script>
export default {
    name:'Detail',
    data() {
        return {
            message:[
                {id:'001',title:'消息1',content:'你好,文本1'},
                {id:'002',title:'消息2',content:'你好,文本2'},
                {id:'003',title:'消息3',content:'你好,文本3'},
            ]
        }
    },
}
</script>
<style>
</style>

index.js

第二级目录下继续放childre
    routes: [// 一堆路由。一个对象就是一个路由
        {
            path: '/home',  // 假如说访问的路径名是这个的话，我们就展示下面这个组件
            component: Home,  // 组件名
            children: [ // TODO: 因为是一级路由的子目录所以放在children这个数组种
                {
                    path: 'message', //因为我们是二级目录所以我们需要加上上一级目录
                    component: Messages,
                    children:[
                        {
                            path: 'detail',
                            component: Details
                        }
                    ]
                },
                {
                    path: 'News', //因为我们是二级目录所以我们需要加上上一级目录
                    component: News
                },
            ]
        },]

// TODO: 该文件是Vue路由器文件，路由管理着所有的路由
import Vue from 'vue'  // 引入阉割版本的vue
import VueRouter from 'vue-router'  // 引入路由插件
// TODO:引入我们需要的组件
import About from '../pages/About.vue'
import Home from '../pages/Home.vue'
// TODO: 引入我们的二级
import News from '../pages/New.vue'
import Messages from '../pages/Messages.vue'
// TODO: 引入我们的三级
import Details from '../pages/Detail.vue'
Vue.use(VueRouter) // 使用路由
// 创建一个路由器，管理所有的路由
const router = new VueRouter({
    routes: [// 一堆路由。一个对象就是一个路由
        {
            path: '/home',  // 假如说访问的路径名是这个的话，我们就展示下面这个组件
            component: Home,  // 组件名
            children: [ // TODO: 因为是一级路由的子目录所以放在children这个数组种
                {
                    path: 'message', //因为我们是二级目录所以我们需要加上上一级目录
                    component: Messages,
                    children:[
                        {
                            path: 'detail',
                            component: Details
                        }
                    ]
                },
                {
                    path: 'News', //因为我们是二级目录所以我们需要加上上一级目录
                    component: News
                },
            ]
        },
        {
            path: '/about',
            component: About
        },
    ],
})
// 抛出我们创建的路由器
export default router

Messages.vue

访问目录中....
    <ul>
      <li v-for="item in message" :key="item.id">
        <router-link to="/home/message/detail">{{item.title}}</router-link
        >&nbsp;&nbsp;
      </li>
    </ul>

<template>
  <div>
    <ul>
      <li v-for="item in message" :key="item.id">
        <router-link to="/home/message/detail">{{item.title}}</router-link
        >&nbsp;&nbsp;
      </li>
    </ul>
    <hr>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: "message",
  data() {
    return {
      message: [
        { id: "001", title: "消息1", content: "你好,文本1" },
        { id: "002", title: "消息2", content: "你好,文本2" },
        { id: "003", title: "消息3", content: "你好,文本3" },
      ],
    };
  },
};
</script>
<style>
</style>

5.给路由传递Params参数 (使用params)

(1).传递参数、参数收取

index.js

接受参数:

path: 'detail/:id/:title/:content',  // 我们这里放置占位符,用来声明接受params参数

// TODO: 该文件是Vue路由器文件，路由管理着所有的路由
import Vue from 'vue'  // 引入阉割版本的vue
import VueRouter from 'vue-router'  // 引入路由插件
// TODO:引入我们需要的组件
import About from '../pages/About.vue'
import Home from '../pages/Home.vue'
// TODO: 引入我们的二级
import News from '../pages/New.vue'
import Messages from '../pages/Messages.vue'
// TODO: 引入我们的三级
import Details from '../pages/Detail.vue'
Vue.use(VueRouter) // 使用路由
// 创建一个路由器，管理所有的路由
const router = new VueRouter({
    routes: [// 一堆路由。一个对象就是一个路由
        {
            path: '/home',  // 假如说访问的路径名是这个的话，我们就展示下面这个组件
            component: Home,  // 组件名
            children: [ // TODO: 因为是一级路由的子目录所以放在children这个数组种
                {
                    path: 'message', //因为我们是二级目录所以我们需要加上上一级目录
                    component: Messages,
                    children:[
                        {
                            path: 'detail/:id/:title/:content',  // 我们这里放置占位符,用来声明接受params参数
                            component: Details
                        }
                    ]
                },
                {
                    path: 'News', //因为我们是二级目录所以我们需要加上上一级目录
                    component: News
                },
            ]
        },
        {
            path: '/about',
            component: About
        },
    ],
})
// 抛出我们创建的路由器
export default router

Message.vue

传递参数

1. 注意这里需要加:
2. 这里我们需要使用飘号 ``
3. 传递参数用得是 ${}
<router-link :to="`/home/message/detail/${item.id}/${item.title}/${item.content}`">{{item.title}}</router-link>

<template>
  <div>
    <ul>
      <li v-for="item in message" :key="item.id">
        <router-link :to="`/home/message/detail/${item.id}/${item.title}/${item.content}`">{{item.title}}</router-link
        >&nbsp;&nbsp;
      </li>
    </ul>
    <hr>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: "message",
  data() {
    return {
      message: [
        { id: "001", title: "消息1", content: "你好,文本1" },
        { id: "002", title: "消息2", content: "你好,文本2" },
        { id: "003", title: "消息3", content: "你好,文本3" },
      ],
    };
  },
};
</script>
<style>
</style>

Detail.vue

index.js和detail.vue的属性名一定要保持一致。其余的不用
eg: id 和 id

<template>
  <div>
    <ul>
      <li>ID: {{ $route.params.id }}</li>
      <li>Title: {{ $route.params.title }}</li>
      <li>CONTENT: {{ $route.params.content }}</li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "Detail",
  mounted() {
    console.log(this);
  },
};
</script>
<style>
</style>

我们这里传参主要借助于:我们的插件里面的$route

文章标签：
JavaScript
前端开发
关键词：
vue VUE.js
吉士先生
目录
相关文章
东方睿赢
|
3天前
|
缓存 监控 JavaScript
探讨优化Vue应用性能和加载速度的策略
【5月更文挑战第17天】本文探讨了优化Vue应用性能和加载速度的策略：1) 精简代码和组件拆分以减少冗余；2) 使用计算属性和侦听器、懒加载、预加载和预获取优化路由；3) 数据懒加载和防抖节流处理高频事件；4) 图片压缩和选择合适格式，使用CDN加速资源加载；5) 利用浏览器缓存和组件缓存提高效率；6) 使用Vue Devtools和性能分析工具监控及调试。通过这些方法，可提升用户在复杂应用中的体验。
东方睿赢
10 0
老板这功能得加钱
|
3天前
|
JavaScript 前端开发
vue(1)，小白看完都会了
vue(1)，小白看完都会了
老板这功能得加钱
11 0
咕噜咕噜wy
|
3天前
|
JavaScript 数据库
ant design vue日期组件怎么清空 取消默认当天日期
ant design vue日期组件怎么清空 取消默认当天日期
咕噜咕噜wy
11 0
向画
|
3天前
|
JavaScript C++
vue高亮显示组件--转载
vue高亮显示组件--转载
向画
8 0
阿珊和她的猫
|
3天前
|
JavaScript 前端开发 数据安全/隐私保护
揭秘Vue中v-model的内部工作机制
揭秘Vue中v-model的内部工作机制
阿珊和她的猫
11 1
yqcoder
|
2天前
|
JavaScript 开发工具 git
Vue 入门系列：.env 环境变量
Vue 入门系列：.env 环境变量
yqcoder
9 1
谢妹纸
|
3天前
|
JavaScript
vue知识点
vue知识点
谢妹纸
11 0
咕噜咕噜wy
|
3天前
|
JavaScript 前端开发 定位技术
Vue使用地图以及实现轨迹回放 附完整代码
Vue使用地图以及实现轨迹回放 附完整代码
咕噜咕噜wy
13 0
Vue使用地图以及实现轨迹回放 附完整代码
老板这功能得加钱
|
3天前
|
JavaScript
Vue中避免滥用this去读取data中数据
Vue中避免滥用this去读取data中数据
老板这功能得加钱
7 0
向画
|
3天前
|
JavaScript
vue中使用pinia及持久化
vue中使用pinia及持久化
向画
6 0