vuerouter配置_route删除路由

vuerouter配置_route删除路由介绍VueRouter是Vue.js官方的路由管理器。它和Vue.js的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:嵌套的路由/视图表模块化的、基于组件的路由配置路由参

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

介绍

Vue RouterVue.js官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:

  • 嵌套的路由/视图表
  • 模块化的、基于组件的路由配置
  • 路由参数、查询、通配符
  • 基于 Vue.js 过渡系统的视图过渡效果
  • 细粒度的导航控制
  • 带有自动激活的 CSS class 的链接
  • HTML5 历史模式或 hash 模式,在 IE9 中自动降级
  • 自定义的滚动条行为
     

安装

安装命令

npm install vue-router --save

如果在一个模块化工程中使用它,必须要通过 Vue.use() 明确地安装路由功能:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

 

模块化使用

vuerouter配置_route删除路由

之前我们使用脚手架vue-cli创建项目时,实际已经配置好了router,创建完项目后,在项目根目录下会有一个router文件夹,router下有一个index.js文件,内容如下:

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";

// 1. 当我们使用其他插件的时候,就必须使用Vue.use安装插件
Vue.use(VueRouter);

// 2. 定义路由,每个路由应该映射一个组件
const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/about",
    name: "About",
    component: About
  },
];

// 3. 创建router实例
const router = new VueRouter({
  // 配置路由和组件之间的应用关系
  routes,  // (缩写) 相当于 routes: routes
});

// 4. 导出router对象,然后在main.js中引用
export default router;

这个文件是专门配置路由的,最后将router对象导出后,我们在项目的main.js中引用即可

import Vue from "vue";
import App from "./App.vue";
import router from "./router";

Vue.config.productionTip = false;

new Vue({
  router,  // 在vue实例中添加router对象,就可以使用路由了
  render: (h) => h(App),
}).$mount("#app");

 
我们的2个组件代码AboutHome代码如下:

// About.vue
<template>
  <div class="about">
    <h1>About</h1>
  </div>
</template>

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

<style scoped>
</style>

// Home.vue
<template>
  <div class="home">
    <h1>Home</h1>
  </div>
</template>

<script>

export default {
  name: "Home",
};
</script>

<style scoped>
</style>

最后我们在App.vue中,写入如下代码:

<template>
  <div id="app">
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-view></router-view>
  </div>
</template>

<style lang="scss">
</style>

使用<router-link>来加载链接,然后使用to表示跳转的链接。最终会把<router-link>渲染成<a>标签。
<router-view>是路由的出口,也就是相应url下的代码会被渲染到这个地方来。
 

HTML5 history模式

但是当我们启动程序,访问页面的时候,url地址上会出现#
vuerouter配置_route删除路由
这是因为vue-router 默认 hash 模式 —— 使用 URLhash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。
如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

我们只需在router文件夹下的index.js中添加modehistory即可,之后重新访问,http://localhost:8080/就不会有#号了

注意:history模式还需要后台配置支持。因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问其他url地址就会返回 404,这就不好看了。

所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/164840.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(1)


相关推荐

  • 阿里云centOS安装图形界面

    阿里云centOS安装图形界面阿里云默认的centOS是不带图形界面的。为了便于查看和操作,我们需要手动安装centOS的GnomeGUI包。主要记录以下几步:(1)首先安装X系统组件#yumgroupinstall"XWindowSystem"(2)安装Gnome包#yumgroupinstall"GNOMEDesktop""GraphicalAdministrationTool…

  • [ 工具篇 ] 谷歌安装 hackbar (超级详细)

    [ 工具篇 ] 谷歌安装 hackbar (超级详细)harkbar

  • 整数补码加减法运算法则是什么_补码加减法中

    整数补码加减法运算法则是什么_补码加减法中整数的补码计算正数的补码计算:与原码相同负数的补码计算:①先求出负数的原码,如-4的原码为10000100②通过原码求出反码,负数的反码就是:除符号位以外,其他位全部取反,如-4的反码为11111011③负数的补码等于负数的反码末位+1,如-4的补码为11111100特例:约定-128的补码为10000000注:若已知补码求原码:正数也是它本身,负数的求法同上,即对补码除符号位外取反,末位加1,就得到原码整数补码加减运算加法[A+B]补=[A]补+[B]补减法[

  • 常见电容器图片_电容分类图片-各种电容器图片[通俗易懂]

    常见电容器图片_电容分类图片-各种电容器图片[通俗易懂]《电容分类图片-各种电容器图片》由会员分享,可在线阅读,更多相关《电容分类图片-各种电容器图片(7页珍藏版)》请在人人文库网上搜索。1、电容分类图片-各种电容器图片第1幅图1胆电容。图2灯具电容器。图3MKPH电容。图4MET电容。图5,10PEI电容,图6,胆贴片电容。图7MPE电容。图8贴片电容。图11轴向电解电容器。图12MPP电容第2幅图1PPN电容。图2PET电容…

  • 写给大忙人看的 – Java中图片压缩上传至MinIO服务器(4)[通俗易懂]

    写给大忙人看的 – Java中图片压缩上传至MinIO服务器(4)[通俗易懂]之前文章已经介绍了MinIO的环境搭建,已经对文件的上传下载方法,本篇文章一起与大家来学习图片压缩上传的方法1、背景最近客户总抱怨APP中图片显示较慢,升级服务器带宽又没有多的预算,查看原因,是因为现在大家都是用的智能手机拍照,拍出来的照片小则2-3M,大则十几M,所以导致图片显示较慢。思考再三,决定将图片进行压缩再上传图片服务器来解决图片显示慢的问题

  • POJ 3159 Candies(SPFA+栈)差分约束[通俗易懂]

    POJ 3159 Candies(SPFA+栈)差分约束

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号