【vue+vue-router】上手示例

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

文章目录

helloworld
npm install --save-dev webpack webpack-cli
npm install --save-dev html-webpack-plugin clean-webpack-plugin webpack-dev-server
npm install --save-dev babel-loader @babel/core 
npm install --save-dev vue-loader vue-template-compiler
npm install --save-dev vue-style-loader css-loader

npm install --save vue
npm install --save vue-router

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo</title>
    <style>
    a{
        text-decoration: none;
        font-size: 14px;
        background-color: #ddd;
        color: blue;
        padding: 5px;
        padding-bottom: 0;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }
    a:not(:first-child){
        margin-left: -5px;
    }

    a:hover{
        color: darkblue;
    }
    #root div:last-child{
        margin-top: 5px;
        border: 1px solid #d3d3d3;
        width: 200px;
        height: 100px;
        font-family: Arial, Helvetica, sans-serif;

    }
    .router-link-active {
        color:darkblue;
        background-color: #d3d3d3;
    }

    </style>
</head>
<body>
    <div id="root">
        <div>
            <router-link to="/home">Home</router-link>
            <router-link to="/about">About</router-link>
            <router-link to="/users">Users</router-link>
        </div>
        <router-view></router-view>
    </div>
</body>
</html>

// index.js
import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

const Home = {
    template:"<div>here is Home page</div>"
}
const About = {
    template:"<div>here is About page</div>"
}
const Users = {
    template:"<div>here is Users page</div>"
}

const routes = [
    {
        path:"/home",
        component:Home
    },
    {
        path:"/about",
        component:About
    },
    {
        path:"/users",
        component:Users
    },
    {
        path:"/",
        redirect:"/home"
    }
];

const router = new VueRouter({
    routes:routes
})
const vm = new Vue({
    router:router
}).$mount("#root")

在这里插入图片描述

index.html

vue创建组件，vue-router将组件映射到路由，vue-router将渲染与当前路由匹配的组件。

router-link

导航组件。
<router-link to=""></router-link>会渲染成带href属性的<a></a>，如：
<router-link to="/home">Home</router-link>会渲染成<a href="#/home">Home</a>；
<router-link to="/about">About</router-link>会渲染成<a href="#/about">About</a>；
<router-link to="/users">Users</router-link>会渲染成<a href="#/users">Users</a>。

当<router-link></router-link>的to属性与当前url匹配时，渲染得到的<a></a>会自动添加router-link-exact-active、router-link-active这两个class属性值。
在这里插入图片描述

router-view

与路由匹配的组件会渲染在这里
在这里插入图片描述

index.js
安装路由功能
import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VurRouter);

在模块化工程中使用vue-router，必须通过调用Vue.use(VueRouter)来明确安装路由功能

定义组件
const Home = {
    template:"<div>here is Home page</div>"
}
const About = {
    template:"<div>here is About page</div>"
}
const Users = {
    template:"<div>here is Users page</div>"
}
定义路由
const routes = [
    {
        path:"/home",
        component:Home
    },
    {
        path:"/about",
        component:About
    },
    {
        path:"/users",
        component:Users
    },
    {
        path:"/",
        redirect:"/home"
    }
];
创建router实例
const router = new VueRouter({
	routes:routes
})
创建vue实例并注入router实例
const vm = new Vue({
	router:router
}).$mount("#root")
改造1

接下来，现在我们稍微修改下Home组件的实现方式，如下：

// Home.vue
<template>
    <div>this is {{sometext}} Home page</div>
</template>

<script>
export default {
    computed:{
        sometext:function(){
            console.log(this.$route);
            console.log(this.$router)
            return "new"
        }
    }

}
</script>

并将Home组件导入index.js，如下：

// index.js
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "./Home.vue";
Vue.use(VueRouter);

// const Home = {
//     template:"<div>here is Home page</div>"
// }
const About = {
    template:"<div>here is About page</div>"
}
const Users = {
    template:"<div>here is Users page</div>"
}
const routes = [
    {
        path:"/home",
        component:Home
    },
    {
        path:"/about",
        component:About
    },
    {
        path:"/users",
        component:Users
    },
    {
        path:"/",
        redirect:"/home"
    }
];

const router = new VueRouter({
    routes:routes
})
const vm = new Vue({
    router:router
}).$mount("#root")

在这里插入图片描述

  • this.$router
    路由器
  • this.$route
    当前路由
改造2

在改造1的基础上继续修改。
前面，{path:"/",redirect:"/home"}会将根路径/重定向到/home。
现在我们使用通配符*，{path:"*",component:Home}，并且将该含通配符的路由放到最后，index.js内容如下，

// index.js
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "./Home.vue";
Vue.use(VueRouter);

const About = {
    template:"<div>here is About page</div>"
}
const Users = {
    template:"<div>here is Users page</div>"
}
const routes = [
    {
        path:"/home",
        component:Home
    },
    {
        path:"/about",
        component:About
    },
    {
        path:"/users",
        component:Users
    },
    {
        path:"*",
        component:Home
    }
];
const router = new VueRouter({
    routes:routes
})
const vm = new Vue({
    router
}).$mount("#root")

然后在Home.vue中添加console.log(this.$route.params)，所以Home.vue的内容如下，

// Home.vue
<template>
    <div>here is {{sometext}} Home page</div>
</template>

<script>
export default {
    computed:{
        sometext:function(){
            // console.log(this.$route);
            // console.log(this.$router);
            console.log(this.$route.params);
            return "new"
        }
    }

}
</script>

在这里插入图片描述

  • this.$route.params.pathMatch
    使用含有通配符的路由，可访问this.$route.params.pathMatch
richest_qi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
全网最细Vue+vue-router+vue-axios+axios+Vuex创建过程笔记
m0_60920364的博客
05-26 751
全网最细Vue+vue-router+vue-axios+axios+Vuex创建过程笔记
基于Vue+Vue-Router+Vuex+Element-ui+axios，参考小米商城，实现的电商项目。.zip
最新发布
10-30
基于Vue+Vue-Router+Vuex+Element-ui+axios，参考小米商城，实现的电商项目。
Vue2+VueRouter2+webpack 构建项目实战（四）接通api，先渲染个列表
热门推荐
FungLeo's Blog
11-17 2万+
Vue2+VueRouter2+webpack 构建项目实战（四）接通api，先渲染个列表前情回顾《Vue2+VueRouter2+webpack 构建项目实战（一）准备工作》《Vue2+VueRouter2+webpack 构建项目实战（二）目录以及文件结构》《Vue2+VueRouter2+webpack 构建项目实战（三）配置路由，整俩页面先》通过前面几篇教程，我们已经顺利搭建起来了，并且已经
vue+vue-router+vuex地址管理思路
weixin_34129696的博客
12-18 884
一、场景描述如何精简页面目录，在实现功能要求的同时，提高页面可维护性成为前端发展趋势。收货地址管理是电商交易必不可少模块，本篇我将通过实现地址管理的部分功能分享下构建思路。本篇会涉及到：es6、vuejs、vue-router、vuex基础知识，在讲解思路过程中，我会穿插说明，但是还是希望读者对相关知识有些了解。实现功能： 1、个人中心与订单确认页均可以进入地址列表页；2、个人中心进入地址列表页，...
Vue + Vuex +Vue-router 整合的简单实现（入门）
百兆的博客
08-20 1869
看到网上很多关于单页面应用开发的入门贴都说“如果你的应用比较简单你，那么你可以不使用vuex（或者redux）”，但是作为初学者，这个又怎么能不学呢？ vue-vuex-demo 代码地址：https://github.com/NathanDing/vue-vuex-demo （如果对您的学习有所帮助，请star我一下） 下面我介绍一下demo的开发说明，有不对的地方请指正。 首先，介绍de...
vue vuex vue-router vue-resource 简单的搭建一个 vue 小项目
d_hongran的专栏
01-12 2582
在开始之前，默认你已经对vue的基础知识有了一定的了解了 这里的开发使用的是es6写的，如果你还未掌握es6的相关知识，那么你----需要抓紧学了，可以戳这里来学。es2015，es2016…… 先贴一波文档：        vue中文网：http://cn.vuejs.org/        vuex中文网：http://vuex.vuejs.org/zh-cn/
基于Vue+Vue-Router+Vuex+Element-ui+axios，高仿小米商城，实现的电商项目
06-15
基于Vue+Vue-Router+Vuex+Element-ui+axios，高仿小米商城，实现的电商项目。本项目前后端分离，前端基于Vue+Vue-router+Vuex+Element-ui+Axios，参考小米商城实现。后端基于Node.js(Koa框架)+Mysql实现。前端包含了...
基于Vue+Vue-router+Vuex+Element-ui+Axios商城
06-27
本项目前后端分离，前端基于Vue+Vue-router+Vuex+Element-ui+Axios，参考小米商城实现。后端基于Node.js(Koa框架)+Mysql实现。 前端包含了11个页面：首页、登录、注册、全部商品、商品详情页、关于我们、我的收藏、...
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统
05-02
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+...
vue3+webpack+vue-router路由封装+axios封装+vuex封装
05-23
vue3+webpack+vue-router路由封装+axios封装+vuex封装，下载资源中包括了vue3+webpack+vue-router路由封装+axios封装+vuex封装的相关代码，分别对vue-router路由进行了封装，对axios进行了封装，对vuex进行了封装，...
【Vue】vue-router的使用
清风微醺的博客
07-05 366
组件开发 创建第一个Vue项目（四）——Vue项目的目录结构+修改首页 路由 Idea使用路由 vue项目中使用vue-router 安装 npm install vue-router --save-dev 导入、使用 由于与原来的html标签冲突，我将content.vue的文件名改为part1.vue了 ...
webpack+vue+vueRouter
雯雯木的博客
02-06 215
确认已经安装node环境和npm包管理工具 开始 1、新建项目文件名为vuedemo 2、npm init -y 初始化项目 安装项目依赖 3、npm install --save vue 默认安装最新版vue 4、npm install --save-dev webpack webpack-dev-server 安装webpack，webpack-dev-server
Vue vue-router
aoshisen的博客
07-05 145
文章目录路由vue-router 的安装Vue.use()创建路由对象router-view 组件 路由 当应用变得复杂以后，我们就需要通过一种便捷、高效的方式来管理应用，最常见的就是通过路由 路由：把 url 与 应用中的对应的组件进行关联，通过不同的 url 访问不同的组件 vue-router 的安装 npm i vue-router // OR yarn add vue-router Vue.use() 通过前面提到的 Vue.use 方法，把 vue-router 安装到指定的 Vue 实例中
vue+vue-router的详细用法
云淡风轻的博客
11-16 417
1. vue安装vue-router npm install -save vue-router //package文件的dependencies节点写入依赖 dependencies部署是需要的 depenDencies 开发依赖，部署时不需要 2. vue 引用vue-router src目录 下面创建router文件夹 在router文件夹下创建index.js文件 index.j...
Vue+vue-router+路由守卫实现路由鉴权功能
一步一个脚印，踏实努力，向着目标前进
05-31 1994
在路由设置中，我们将路由拆分为两类，需要进行鉴权的路由和不需要进行鉴权的路由。需要进行鉴权的路由需要在路由元信息中添加requiresAuth: true属性。路由鉴权功能是Vue+vue-router框架中常见的功能之一，也是前端安全性的一个重要方面。最后，在需要鉴权的页面中，我们可以使用beforeRouteEnter守卫来在进入页面前获取用户信息。在路由设置中，我们为需要鉴权的路由添加requiresAuth元信息。
vue+vueRouter 实例demo
一米阳光
07-10 1万+
main.js import Vue from 'vue' import App from './App.vue' import router from './router/router' /** * 加载插件 * @VueRouter：路由 */ /** * 定义常量信息 * @DOMAINNAME：客户端地址 * @SERVERNAME：服务端地址 *
webpack+vue+vueRouter模块化构建完整项目实例超详细步骤（代码、入门篇）
u011649976的博客
08-04 4434
开始（确认已经安装node环境和npm包管理工具） 1、新建项目文件名为vuedemo 2、npm init -y 初始化项目 >安装项目依赖 3、npm install --save vue 默认安装最新版vue 4、npm install --save-dev webpack webpack-dev-server 安装webpack，webpack-dev
Vue-vue-router
qq_46199553的博客
09-04 1161
1. 什么是 vue-router vue-router 是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用，能够轻松的管理 SPA 项目 中组件的切换。 vue-router 的官方文档地址：https://router.vuejs.org/zh/ 2. vue-router 安装和配置的步骤 ① 安装 vue-router 包 ② 创建路由模块 ③ 导入并挂载路由模块 ④ 声明路由链接和占位符 2.1 在项目中安装 vue-router 在 vue2 的项目中，安装 vue-ro
vue+vueRouter+webpack的简单实例
yolo0927的前端学习之路
12-05 6782
vue2.0仿制vux下方tabbar的一个简单实例
vue + php简易后台管理系统源码
07-20
我们可以使用Vue的CLI工具来创建一个新的项目，并且使用Vue Router来管理不同页面之间的导航和跳转。 接下来，我们需要使用PHP来实现后台的功能。PHP提供了强大的后端处理能力，我们可以使用它来处理表单提交、...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值