Vue 路由的基本使用

news/2024/7/10 1:38:06 标签: vue, 路由

文章目录

路由的理解

生活中的路由：
在这里插入图片描述
vue-router的理解：
vue 的一个插件库，专门用来实现SPA应用(single page web application)
在这里插入图片描述

对SPA应用的理解：
1.单页Web应用(single page web application，SPA)
2.整个应用只有一个完整的页面
3.点击页面中的导航链接不会刷新页面，只会做页面的局部更新
4.数据需要通过ajax请求获取

什么是路由?
1.—个路由就是一组映射关系 (key - value)
2. key 为路径, value 可能是 function 或 component

路由分类
1.后端路由：
1)理解：value 是 function，用于处理客户端提交的请求
2)工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据

2.前端路由：
1)理解：value 是 component，用于展示页面内容
2)工作过程：当浏览器的路径改变时，对应的组件就会显示

路由的基本使用

我们需要完成一个功能，点击左侧导航切换右侧内容，页面如下：
在这里插入图片描述
前提：布局编写
我们之前在 public 下新建了 css 文件夹，并放入了 bootstrap.css，并在 index.html 中进行了引入：

<link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css">

在 App.vue 中编写布局：

<template>
  <div>
    <div class="row">
      <div class="col-xs-offset-2 col-xs-8">
        <div class="page-header"><h2>Vue Router Demo</h2></div>
      </div>
    </div>
    <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"><h2>我是About的内容</h2></div>
        </div>
      </div>
    </div>
  </div>
</template>

创建 About.vue 和 Home.vue 组件，两个文件只有文字不同

<template>
  <h2>我是About的内容</h2>
</template>

<script>
export default {
  name: "About"
}
</script>

<style scoped>

</style>

1、安装vue-router
由于我们目前学习的是 vue2 ，所以我们需要指定 vue-router 的 3 版本，不指定会默认安装 4 版本，而 4 版本只能在 vue3 中使用，所以我们执行：
npm i vue-router@3

2、和 components 同级，创建 router 文件夹，其下创建 index.js

//该文件用于创建整个应用的路由器
import VueRouter from "vue-router";
import About from "../components/About";
import Home from "../components/Home";
//创建并暴露一个路由器
export default new VueRouter({
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home
        },
    ]
})

3、main.js 引入 vue-router，引入路由器
vue-router 是个插件，所以我们在 main.js 中引入并使用，同时引入刚才写的 index.js，并配置

//引入Vue
import Vue from 'vue';
//引入App
import App from './App';
//引入vue-router
import VueRouter from "vue-router";
//引入路由器
import router from "@/router";

//关闭vue的生产提示
Vue.config.productionTip = false
//应用插件
Vue.use(VueRouter)

//创建vm
new Vue({
    el: "#app",
    render: h => h(App),
    router:router
})

4、修改页面
App.vue 中 a 标签改为 <router-link>，其中active-class可配置高亮样式

<!--原始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 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>

把要区分展示的位置改为<router-view>标签

<div class="panel-body">
	<!--指定组件的呈现位置-->
	<router-view></router-view>
</div>

运行程序：
在这里插入图片描述

一些注意点

1、路由组件通常存放在 pages 文件夹，一般组件通常存放在 components文件夹

我们把头部单独写成一个组件，新建 Banner.vue

<template>
  <div class="col-xs-offset-2 col-xs-8">
    <div class="page-header"><h2>Vue Router Demo</h2></div>
  </div>
</template>

<script>
export default {
  name: "Banner"
}
</script>

在App.vue 中引入并使用

<template>
  <div>
    <div class="row">
      <Banner/>
    </div>
    <div class="row">
      ......
    </div>
  </div>
</template>

<script>
import Banner from "@/components/Banner";
export default {
  name: 'App',
  components: {Banner},
}
</script>

我们把 Banner 叫作一般组件，而 About、Home 我们叫作路由组件，一般放在 pages 文件夹里，所以需要修改：
在这里插入图片描述
2、通过切换，“隐藏"了的路由组件，默认是被销毁掉的，需要的时候再去挂载
3、每个组件都有自己的$route属性，里面存储着自己的路由信息
4、整个应用只有一个router，可以通过组件的 $router属性获取到

嵌套路由

先看效果：
在这里插入图片描述

新建 Message.vue 和 News.vue

Message.vue

<template>
  <div>
    <ul>
      <li v-for="m in messageList" :key="m.id">
        <a href="/ message1">{{m.title}}</a>&nbsp;&nbsp;
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Message",
  data(){
    return{
      messageList:[
        {id:"001",title:"消息001"},
        {id:"002",title:"消息002"},
        {id:"003",title:"消息003"},
      ]
    }
  }
}
</script>

<style scoped>

</style>

News.vue

<template>
  <ul>
    <li>news001</li>
    <li>news002</li>
    <li>news003</li>
  </ul>
</template>

<script>
export default {
  name: "News"
}
</script>

制定路由规则，修改 index.js

//该文件用于创建整个应用的路由器
import VueRouter from "vue-router";
import About from "../pages/About";
import Home from "../pages/Home";
import News from "../pages/News";
import Message from "../pages/Message";
//创建并暴露一个路由器
export default new VueRouter({
    routes: [
        {
            path: '/about',
            component: About
        },
        {
            path: '/home',
            component: Home,
            children: [
                {
                    path: 'news',
                    component: News
                },
                {
                    path: 'message',
                    component: Message
                }
            ]
        },
    ]
})

修改 Home.vue

<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>
export default {
  name: "Home"
}
</script>

📢有两点需要注意：
1、index.js 中/about 和 /home 是一级路由，news 和 message 是二级路由，规则前不需要加斜杠了
2、Home.vue 中的路径，需要写完整路径 /home/news

学习完可以继续下一章啦🎉：路由参数传递


http://www.niftyadmin.cn/n/1816709.html

相关文章

一个使用敏捷开发平台构建的应用系统

一个使用敏捷开发平台构建的应用系统

去年11月份&#xff0c;本人发表了关于敏捷开发的系列文章&#xff0c;就一直没有下文了&#xff0c;还被很多朋友抱怨了一番。真实情况是&#xff0c;从去年年底开始&#xff0c;本人开始做手机旅游地图的项目&#xff0c;后来得到一笔投资&#xff0c;成立了公司。程序开发不…
阅读更多...
Node.js 被分叉出一个项目 — Ayo.js，肿么了

Node.js 被分叉出一个项目 — Ayo.js，肿么了

&#xff08;注&#xff1a;ayo.js叉从Node.js。目前&#xff0c;大量的文档仍然指向Node.js库。&#xff09; ayo.js是一个JavaScript运行时建立在Chrome的V8 JavaScript引擎。ayo.js使用事件驱动的&#xff0c;非阻塞I/O模型&#xff0c;使其轻量化和高效。生态系统的ayo.js…
阅读更多...
Vue 路由参数传递

Vue 路由参数传递

文章目录路由的query参数命名路由路由的params参数props配置第三种写法上一节&#xff1a;Vue 路由的基本使用 路由的query参数 先看效果 我们需要创建一个 Detail.vue 组件&#xff0c;根据点击的消息来展示消息id和标题 创建路由规则&#xff0c;修改 index.js ...... i…
阅读更多...
Cookie 基本操作

Cookie 基本操作

Cookie 基本操作 对于 Cookie 得常用操作有&#xff0c;存取&#xff0c;读取&#xff0c;以及设置有效期&#xff1b;具体可以参照 JavaScript 操作 Cookie 一文&#xff1b;但&#xff0c;近期在前端编码方面&#xff0c;皆以Vue为冲锋利器&#xff0c;所以就有用到一款插件 …
阅读更多...
IBatisNet配置

IBatisNet配置

结合上面示例中的IbatisNet配置文件&#xff0c;下面对配置文件中各节点的说明&#xff1a; <?xml version"1.0" encoding"utf-8"?><sqlMapConfig xmlns"http://ibatis.apache.org/dataMapper" xmlns:xsihttp://www.w3.org/2001/XMLS…
阅读更多...
Vue 编程式路由导航

Vue 编程式路由导航

文章目录router- link的replace属性编程式路由导航缓存路由组件两个新的生命钩子router- link的replace属性 1.作用&#xff1a;控制路由跳转时操作浏览器历史记录的模式 2.浏览器的历史记录有两种写入方式&#xff1a;分别为push和replace&#xff0c;push是追加历史记录&…
阅读更多...
嘿嘿,看看你属于哪个阶段的程序员？ (转)

嘿嘿,看看你属于哪个阶段的程序员？ (转)

国外开发者博客中有一篇有趣的文章&#xff0c;将程序员按水平像软件版本号那样划分为不同的版本。相对于在招聘时分为初级&#xff0c;中级&#xff0c;高级程序员&#xff0c;直接表明 需要某种语言N版本的程序员或许更方便直接。根据作者的观点&#xff0c;可将WEB开发者大致…
阅读更多...
[导入]GEF中导视图的使用

[导入]GEF中导视图的使用

作者: liugang594 链接&#xff1a;http://liugang594.javaeye.com/blog/213545 发表时间: 2008年07月10日 声明&#xff1a;本文系JavaEye网站发布的原创博客文章&#xff0c;未经作者书面许可&#xff0c;严禁任何网站转载本文&#xff0c;否则必将追究法律责任&#xff01…
阅读更多...
最新文章

Copyright @ 2022~2023