Vue_router

最新推荐文章于 2023-05-24 10:21:47 发布
最新推荐文章于 2023-05-24 10:21:47 发布
阅读量250 收藏 2
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nep_chan/article/details/86552332
版权

路由

Vue路由官网

  • 实现单页面应用，只有一个页面，页面更新不跳转页面，而是局部刷新(切换)
  • 使用a标签，多页面应用，页面跳转会刷新

安装

安装vue路由，是一个必须依赖

npm install vue-router --save

把下面代码复制进去main.js里面，并且一定要用Vue.use来明确安装

main.js
// 引入路由模块
import VueRouter from 'vue-router'
// 显式安装该模块
Vue.use(VueRouter)

初阶路由案例

项目结构图，使用vue create vue-project命令生成vue脚手架
路由案例结构
components存一个页面中的各个部分组件，pages存导入components中组件组成页面的组件，定义的路由配好对应pages组件路径实现跳转，通过App.vue的<router-view></router-view>标签导入路由对应组件内容

定义路由组件

在src文件内创建一个pages文件夹，放路由组件=>页面组件

Katsuki.Vue
<template>
    <div>
        <Xheader />
        <Xsearch />
        <Xpanel />
    </div>
</template>
<script>
// 引用组件
import Xheader from '../components/Xheader.vue'
import Xsearch from '../components/Xsearch.vue'
import Xpanel from '../components/Xpanel.vue'

export default {
  components: {
    Xheader,
    Xsearch,
    Xpanel
  }
}
</script>

Kasami.vue
<template>
    <div>
        <Xheader />
    </div>
</template>
<script>
// 引用组件
import Xheader from '../components/Xheader.vue'

export default {
  components: {
    Xheader
  }
}
</script>

定义路由&实例路由&注入router

main.js
import Vue from 'vue'
import App from './App.vue'

//微信样式
import 'weui'
//全局样式
import './styles/app.css'

// 引入路由模块
import VueRouter from 'vue-router'
// 显示安装该模块
Vue.use(VueRouter)

// 定义路由
// Katsuki路由
import Katsuki from './pages/Katsuki.vue'
// Kasami路由
import Kasami from './pages/Kasami.vue'
// 配置路由
const routes = [
  // 重定向路由，比如刚进页面的时候，默认跳转的路由位置
  { 
    path: '/', 
    redirect: '/katsuki' 
  },
  // 设置路由
  { path: '/katsuki', component: Katsuki },
  { path: '/kasami', component: Kasami }
]

//实例路由配置
const router = new VueRouter({
  routes
})

// 注入上面定义的router
// Root容器
new Vue({
  render: h => h(App),
  // 挂载路由
  router,
}).$mount('#app')

放置router-view

router-view根据上面路由配置的规则，让组件出现

App.vue
<template>
  <div id="app">
    <router-view></router-view>
    <Xfooter />
  </div>
</template>

<script>
import Xfooter from './components/Xfooter.vue'

export default {
  name: 'app',
  components: {
    Xfooter
  }
}
</script>

<style>

</style>

实现点击底部按键切换路由

Xfooter样式图，使用weui样式的底部栏
weui底部
使用<router-link to="/路由"></router-link>替代a标签切换

Xfooter.vue 
<template>
  <div class="weui-tabbar">
    <router-link to="/katsuki" href="javascript:;" class="weui-tabbar__item weui-bar__item_on">
      <span style="display: inline-block;position: relative;">
        <img :src="iconTabbar" alt class="weui-tabbar__icon">
        <span class="weui-badge" style="position: absolute;top: -2px;right: -13px;">18</span>
      </span>
      <p class="weui-tabbar__label">Katsuki</p>
    </router-link>
    <router-link to="/kasami" href="javascript:;" class="weui-tabbar__item">
      <img :src="iconTabbar" alt class="weui-tabbar__icon">
      <p class="weui-tabbar__label">Kasami</p>
    </router-link>
    <a href="javascript:;" class="weui-tabbar__item">
      <span style="display: inline-block;position: relative;">
        <img :src="iconTabbar" alt class="weui-tabbar__icon">
        <span class="weui-badge weui-badge_dot" style="position: absolute;top: 0;right: -6px;"></span>
      </span>
      <p class="weui-tabbar__label">发现</p>
    </a>
    <a href="javascript:;" class="weui-tabbar__item">
      <img :src="iconTabbar" alt class="weui-tabbar__icon">
      <p class="weui-tabbar__label">我</p>
    </a>
  </div>
</template>

<script>
	import iconTabbar from "../assets/icon_tabbar.png";
	export default {
	  data() {
	    return {
	      iconTabbar
	    };
	  }
</script>

<style scoped>
.weui-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
}
</style>

项目运行，url出现的/#/及其之后到?前的部分就是路由

路由切换点击时，因切换而删除的组件会触发生命周期中的销毁方法destoryed()。总之router-view就等同于一个舞台，进场就会执行组件生命周期的编译、挂载，数据更改触发更新，离场就触发销毁

嵌套路由

附带的知识点：命名路由、路由重定向、H5 History模式、编程式导航、导航全局守卫（最有用）

在上面的案例的基础上进行修改
vue嵌套路由
pages页面组件中添加Detail.vue文件，为一层路由组件

main.js
import Vue from 'vue'
//微信样式
import 'weui'
//全局样式
import './styles/app.css'

// 引入路由模块
import VueRouter from 'vue-router'
// 显式安装该模块
Vue.use(VueRouter)

//一层路由
//首页路由
import App from './App.vue'
//详情页路由
import Detail from './pages/Detail.vue'

//二层路由
// Katsuki路由
import Katsuki from './pages/Katsuki.vue'
// Kasami路由
import Kasami from './pages/Kasami.vue'


// 配置路由
const routes = [
  {
    path: '/app',
    // 路由命名，方便跳转
    name: 'app',
    component: App,
    children: [
      // 嵌套路由里层的path要删掉 /
      {
        path: 'katsuki',
        name: 'katsuki',
        component: Katsuki,
        // 路由传参，把一些参数固定的值写在这
        // 就可以this.meta.age拿到
        meta: {
            age: '18'
        }
      },
      {
        path: 'kasami',
        // 下面的编程式导航使用这个命名为例
        name: 'kasami',
        component: Kasami
        meta: {
            age: '17'
        }
      }
    ]
  },
  // 就是可以在:id里接受一个不固定的值
  // 可以放多个如 path: '/detail/:id/:name'
  // 下面的 Xpanel.vue 对应使用
  {
    path: '/detail/:id',
    name: 'detail',
    component: Detail
  },
   // 重定向路由，刚进页面的时候，默认跳转的路由位置
   // 与之前的不同，使用命名路由方式
  {
    path: '/',
    redirect: {
    	name: 'katsuki'
    }
  }
]

// 实例该路由配置
const router = new VueRouter({
  // h5history路由模式，作用就是url地址的 # 去除，工作中不是特殊情况基本用不上
  // 有兼容性的问题，去除 # 服务器就会认为这是文件夹路径，不是路由
  // mode: 'history',
  // 建议用默认的哈希模式，不写就是该模式
  mode: 'hash',
  routes
})

// Root容器
new Vue({
  // 原挂载App修改为router-view
  render: h => h('router-view'),
  // 挂载路由
  router,
}).$mount('#app')

Xpanel.vue设置router-link"让/app路由跳转到/detail路由

Xpanel.vue 假设该组件拿到数据进行v-for生成
<template>
	<router-link :to="`/detail/${index}`"
	   v-for="(d,index) in datas"
	   :key="index"
	   href="javascript:void(0);"
	>
		<!-- 相关内容渲染 -->
	</router-link>
</template>
<script>
export default {
  data() {
    return {
      datas: [假装有数据]
    };
  }
};
</script>

Detail.vue：/detail路由页面组件，所有路由的信息都可以在组件的$route拿到

Detail.vue
<template>
	<p>
	  <!-- 直接引入方式，打包时会压缩进webpack，一般用这种方式压缩精灵图 -->
      <img :src="picKatsuki" alt>
      <!-- 单张图片用https://xxx/katsuki.jpg方式请求 -->
      <img src="https://xxx/katsuki.jpg" alt>
    </p>
</template>

<script>
import picKatsuki from "pic_katsuki";
export default {
  data() {
    return {
      picKatsuki
    };
  },
 created() {
 	// 进入路由时触发
    // 获取url上的参数
    console.log(this.$route);
    // 编程式导航
    console.log(this.$router);
  }
};
</script>

Xfooter.vue的router-link的路由导向进行修改

<router-link to="/app/katsuki"></router-link>

编程式导航，就是用函数方式跳转
<a @click="toKasami"></a>
<script>
export default {
  methods: {
    toKasami() {
      // 未使用路由命名的跳转
      this.$router.push('/app/kasami');
      // 根据命名路由来进行跳转
      this.$router.push({ name: "kasami" });
    }
  }
};
</script>

在上面的基础上进一步模块化，创建router.js专门处理路由，在main.js中导入
pages中创建Sign.vue登录页面组件，用于路由守卫

router.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

//一层路由
import App from '../App.vue'
import Detail from '../pages/Detail.vue'
// 登录路由
import Sign from '../pages/Sign.vue'

//二层路由
import Katsuki from '../pages/Katsuki.vue'
import Kasami from '../pages/Kasami.vue'

// 配置路由
const routes = [
  {
    path: '/app',
    name: 'app',
    component: App,
    children: [
      {
        path: 'katsuki',
        name: 'katsuki',
        component: Katsuki
      },
      {
        path: 'kasami',
        name: 'kasami',
        component: Kasami
      }
    ]
  },
  {
    path: '/detail/:id',
    name: 'detail',
    component: Detail
  },
  {
    // 登录路由配置
    path: '/sign',
    name: 'sign',
    component: Sign
  },
  {
    path: '/',
    redirect: {
    	name: 'katsuki'
    }
  }
]

// 实例路由
const router = new VueRouter({
  mode: 'hash',
  routes
})

// 路由守卫
// to:将前往的页面路由 from:从哪个页面来的路由 next:下一步操作
router.beforeEach((to, from, next) => {
    let token = localStorage.getItem("token");
    // 这里用伪token方式验证，在浏览器控制台的localStorage进行设置token值
    // 如果token是123的话进去目标页面，否则返回'/sign'页面
    if (token == 123 || to.path == '/sign') {
        next()
    } else {
        // 如果失败跳转登录页面
        router.push({
            name: "sign"
        })
    }
    // 用定时器测试守卫是否执行
    // setTimeout(()=>{
    //     next()
    // },3000)
})
export default router

main.js
import Vue from 'vue'
// 引入路由模块
import router from './configs/router.js'
//微信样式
import 'weui'
//全局样式
import './styles/app.css'

// Root容器
new Vue({
  //挂载修改为router-view
  render: h => h('router-view'),
  // 挂载路由
  router,
}).$mount('#app')
katsukichan
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-router
小毛驴的博客
05-16 3035
官网：https://router.vuejs.org/zh-cn/ 因为我们更多的是利用vue+webpack搭建整个项目的框架（例如vue-cli），所以我们这里利用vue-cli讲解 1.路由的介绍 何为前端路由 路由是根据不同的url展示不同的页面或内容 前端路由就是把不同路由对应不同内容或者页面的任务放在钱前端，以前是服务端根据不同的url返回不同的内容 何时使用前端路由 ...
Vue-router
nerao的博客
06-11 231
Router SPA （ single page App ） 单页面应用 多页面应用 有多个html文件，通过a标签的连接联通各个页面 缺点 开发起来太冗余，编译、压缩很耗时间 页面之间的跳转速度太慢 单页面应用 不需要刷新页面，因为它就是一个页面 这个页面内容在切换 单页面内容之间的切换要想实现我们就是用路由了 如今我们的app主要的开发形式就是spa vue路由功能 ...
vue_router的简单使用
littlexiaoshuishui的博客
07-10 236
路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home的内容，如果点击页面上的about 按钮，页面中就要显示about 的内容。Home按钮  =&gt; home 内容， about按钮 =&gt; about 内容，也可以说是一种映射. 所以在页面上有两个部分，一个是点击部分，一个是点击之后，显示内容的部分。 　　点击之后，怎么做到正确的对应，比如，我点击home ...
vue基础之vue-router（前端路由，详细知识点）
qq_45549336的博客
08-10 230
乱七八糟的笔记，仅仅是个人学习使用 不用往下看，浪费时间 路由与组件 一个路由对应一个组件，是一一对应的映射关系 引入vue与vue-router库 <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> 实例化vue-router const router
vue-router 详解
OneBaBa的专栏
05-24 2111
to：用于指定跳转的路径tag：tag可以指定之后渲染成什么组件，比如我们下面的代码会被渲染成一个元素，而不是。replace：replace不会留下history记录，所以指定replace的情况下，后退键返回不能返回到上一个页面中active-class：当对应的路由匹配成功时，会自动给当前元素设置一个router-link-active的class，设置active-class可以修改默认的名称。
weblogic中servlet报404_weblogic中ServletActionContext.getServletContext().getRealPath("/")空指针的解决...
weixin_39652136的博客
12-21 670
问题：在weblogic war 路径 getServletContext().getRealPath()和request.getRealPath，weblogic获取路径总是为NULL，怎么破？？？？？通常情况下载tomcat中，我们以前使用 HttpServletRequest request;request.getRealPath(arg0)但是这是个方法已经过时了。。。。。。。。reque...
Vue_router在项目中的应用
Nick_YangXiaoTong的博客
07-23 382
路由分类 $router =&gt; 路由器 $route =&gt; 当前路由 创建一个项目 vue init webpack xxx 此时的router配置 import Vue from 'vue' // 引入Vue import Router from 'vue-...
custom_vue_router.rar
12-23
例如，`Vue.use(VueRouter)` 就是注册 Vue Router 插件，使 Vue 应用可以使用 Vue Router 的功能。 - **mixin**：Vue 中的 mixin 用于共享组件选项。当多个组件需要相同的选项时，可以通过 mixin 进行复用，例如...
vue_router.js
12-10
这个可以去官网直接下载，这是我复制出来的https://router.vuejs.org/zh/installation.html，在这里面点直接下载就行了，CSDN其他的还要积分，有点坑
vue_shoppingSite_Mobile:Vue-cli + Vue_Router + VantUI + Axios
04-19
vue_shopping Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build Lints and fixes files npm run lint Customize ...
Udemy-Vue_Router
04-17
spa-vuejs 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
html中vue_router简单实例
jacks
12-14 3365
功能：使用路由进行组件（页面）切换 （极简：只有切换功能） 一、写出基本元素 <div id="main"> <button @click="gotoLogin">login</button> <button @click="gotoRegister">register</button> <router-view></router-view> <!-- 内容显示的位置 --> </d
VUE router详解
m0_46371029的博客
05-08 234
如何安装和使用vue-router 1.安装vue-router 步骤一: 安装vue-router npm install vue-router --save 步骤二: 在模块化工程中使用它(因为是一个插件, 所以可以通过Vue.use()来安装路由功能) 第一步：导入路由对象，并且调用 Vue.use(VueRouter) 第二步：创建路由实例，并且传入路由映射配置 第三步：在Vue实例中挂载...
超详细的Vue-router (路由)
qq_64750772的博客
03-05 1521
由于Vue在 开发时对路由支持的不足，于是官方补充了vue-router插件。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起 来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，实际上就是组件的切换。路由就是 SPA（单页应用）的路径管理器。再通俗的说，vue-router就是我们WebApp的链接路径管理系统。 一、安装 如果你用vue-cli脚手架来搭建项目，配置过程会选择是否用到路由，如...
阶段三模块一 直播二 手写VurRouter-hash模式
weixin_45345105的博客
01-14 163
目标 观察vue-router源码-实现路由嵌套功能 Vue-Router 演示基本效果 Vue-Router 源码结构 Vue.use() 注册插件源码 src\core\global-api\use.js export function initUse (Vue: GlobalAPI) { // Vue.use(VueRouter, options) Vue.use = function (plugin: Function | Object) { const installedPl
Vue.js笔记-vue-router入门
糖糖小菜鸟前端er
11-02 3271
概述 vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。 本文将以示例的形式来介绍vue-router的各个特性，一共包含
关于Vue-Router 底层运行逻辑浅析
Rain_Ze的博客
07-13 394
只要是使用Vue 开发程序 就不可避免的会使用到 Vue-Router ( 路由)，作为Vue生态的一部分 Vue-Router 不同于传统的开发模式，每个url都会重新加载页面，而是单页面(Single Page Application)模式是根据url加载不同的组件...
VueRouter的简单使用
tongxintong的专栏
11-25 143
1. 有一个HTML文件里的DOM元素（的id）作为vue实例挂载的入口； 2.创建VueRouter文件； import Vue from 'vue'; import VueRouter from 'vue-router';//import VueRouter import HelloWorld from '../components/HelloWorld'; import User fr...
VueRouter实现原理
苍山负雪_Stacking
06-06 369
VueRouter实现原理+分析
(0 , vue_router__WEBPACK_IMPORTED_MODULE_0__.createWebHashHistory) is not a function
最新发布
12-06
如果没有正确引入该函数，就会出现类似于“(0 , vue_router__WEBPACK_IMPORTED_MODULE_0__.createWebHashHistory) is not a function”的错误。 解决该问题的方法是，确保在使用createRouter函数创建路由器实例时，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值