简单使用

创建项目

vue-cli创建

$npm install -g @vue/cli

$vue --version

@vue/cli 4.5.15

$vue create my-project

然后的步骤:

Please pick a preset

选择 Manually select features
Check the features needed for your project

选择上TypeScript，特别注意点空格是选择，点回车是下一步
Choose a version of Vue.js that you want to start the project with

选择 3.x (Preview)
Use class-style component syntax

直接回车
Use Babel alongside TypeScript

直接回车
Pick a linter / formatter config

直接回车
Use history mode for router?

直接回车
Pick a linter / formatter config

直接回车
Pick additional lint features

直接回车
Where do you prefer placing config for Babel, ESLint, etc.?

直接回车
Save this as a preset for future projects?

直接回车

文件结构：

my-project

+--- babel.config.js

+--- package-lock.json

+--- package.json

+--- public

|   +--- favicon.ico

|   +--- index.html

+--- README.md

+--- src

|   +--- App.vue

|   +--- assets

|   |   +--- logo.png

|   +--- components

|   |   +--- HelloWorld.vue

|   +--- main.ts

|   +--- shims-vue.d.ts

+--- tsconfig.json

+--- node_modules

|   +--- ...

入口文件为src/main.ts

vite创建

执行以下命令创建项目

$npm init vite-app <project-name>

$cd <project-name>

$npm install

$npm run dev

文件结构：

project-name

+--- index.html

+--- package-lock.json

+--- package.json

+--- public

|   +--- favicon.ico

+--- src

|   +--- App.vue

|   +--- assets

|   |   +--- logo.png

|   +--- components

|   |   +--- HelloWorld.vue

|   +--- index.css

|   +--- main.js

+--- node_modules

|   +--- ...

入口文件为src/main.ts

注意: 由于使用vite方法创建的项目没有vue的声明文件, 所以需要我们自定义, 否则会报错.

src/shims-vue.d.ts

/* eslint-disable */

declare module '*.vue' {

  import type { DefineComponent } from 'vue'

  const component: DefineComponent<{}, {}, any>

  export default component

}

安装`vue-router`

$npm install vue-router@4

至此, package.json如下:

{

  "name": "my-project",

  "version": "0.1.0",

  "private": true,

  "scripts": {

    "serve": "vue-cli-service serve",

    "build": "vue-cli-service build",

    "lint": "vue-cli-service lint"

  },

  "dependencies": {

    "core-js": "^3.6.5",

    "vue": "^3.0.0",

    "vue-router": "^4.0.12"

  },

  "devDependencies": {

    "@typescript-eslint/eslint-plugin": "^4.18.0",

    "@typescript-eslint/parser": "^4.18.0",

    "@vue/cli-plugin-babel": "~4.5.0",

    "@vue/cli-plugin-eslint": "~4.5.0",

    "@vue/cli-plugin-typescript": "~4.5.0",

    "@vue/cli-service": "~4.5.0",

    "@vue/compiler-sfc": "^3.0.0",

    "@vue/eslint-config-typescript": "^7.0.0",

    "eslint": "^6.7.2",

    "eslint-plugin-vue": "^7.0.0",

    "typescript": "~4.1.5"

  }

}

创建/修改组件

创建src/router/index.ts

import { createRouter, createWebHashHistory } from "vue-router"

import Home from '../components/Home.vue'

import About from '../components/About.vue'

import User from '../components/User.vue'

const routes = [

	// router参数详细看下文

	{

		path: "/home",

		name: "home",

		component: Home

	},

	{

		path: "/about",

		name: "about",

		component: About

	},

	{

		path: "/user/:uid",  // 动态参数

		name: "user",

		component: User

	}

]

export const router = createRouter({

	history: createWebHashHistory(),

	routes: routes

})

创建组件: Home.vue About.vue User.vue

src/components/Home.vue

<template>

  <div>home组件</div>

</template>

<script lang="ts">

import { defineComponent } from "vue";

export default defineComponent({

  name: "Home",

  setup() {

	return {

	  // 返回的数据

	};

  },

});

</script>

src/components/About.vue

<template>

  <div>About组件</div>

</template>

<script lang="ts">

import { defineComponent } from "vue";

export default defineComponent({

  name: "About",

  setup() {

	return {

	  // 返回的数据

	};

  },

});

</script>

src/components/User.vue

<template>

  <div>User组件</div>

</template>

<script lang="ts">

import { defineComponent } from "vue";

export default defineComponent({

  name: "User",

  setup() {

	return {

	  // 返回的数据

	};

  },

});

</script>

修改App.vue

<template>

  <div>{{ appMessage }}</div>

  <!-- router-link会被渲染成a标签 -->

  <router-link to="/home">home</router-link>

  <router-link to="/about">about</router-link>

  <router-link to="/user/lczmx">user</router-link>

  <!-- 路由出口 -->

  <!-- 路由匹配到的组件将渲染在这里 -->

  <router-view></router-view>

</template>

<script lang="ts">

import { defineComponent } from "vue";

export default defineComponent({

  name: "App",

  setup() {

	const appMessage = "App组件";

	return {

	  // 返回的数据

	  appMessage,

	};

  },

});

</script>

<style>

/* 添加样式 */

#app {

  text-align: center;

  margin-top: 50px;

}

a {

  margin: 30px;

  display: inline-block;

}

</style>

修改入口ts

修改src/main.ts：

import { createApp } from 'vue'

import App from './App.vue'

import './index.css'

import { router } from './router'

// 创建应用 返回对应的实例对象

const app = createApp(App)

// 安装 vue-router 插件

app.use(router)

// 调用mount方法

app.mount('#app')

启动vue

$npm run serve

> my-project@0.1.0 serve

> vue-cli-service serve 

 INFO  Starting development server...

98% after emitting CopyPlugin

 DONE  Compiled successfully in 6387ms                                                                                               下午4:14:30

  App running at:

  - Local:   http://localhost:8080/

  - Network: http://192.168.43.12:8080/

  Note that the development build is not optimized.

  To create a production build, run npm run build.

No issues found.

在浏览器中访问

根据提示, 访问http://localhost:8080/, 如下图

文件结构图片

综合使用

动态参数

假如我们需要的路由是: /user/lczmx和/user/jack, 但是我们明显不可能为这两个路由定义两个不同的组件, 最好的方法就是使用动态参数:

const routes = [

  // 动态段以冒号开始

  { path: '/users/:id', component: User },

  // 使用正则表达式  `()` 里面的东西会传给前面的pathMatch

  // 值在route.params.pathMatch下

  { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },

]

匹配时, 会将参数映射到router实例的currentRoute.value.params上

注意vue2中: 由于在setup无法使用this.$route和this.$router

至于如何获取, 看我的另一篇博客: vue3获取当前路由和官网: Vue Router 和组合式 API

匹配列表

匹配模式	匹配路径	当前路由的参数
`/users/:username`	`/users/eduardo`	`{ username: 'eduardo' }`
`/users/:username/posts/:postId`	`/users/eduardo/posts/123`	`{ username: 'eduardo', postId: '123' }`

在使用带有参数的路由时需要注意: 由于相同的组件实例将被重复使用，所以组件的生命周期钩子不会被调用

但是我们可以对路由进行监听

使用watch监听动态参数

修改src/components/User.vue:

<template>

  <div>User组件</div>

  <p>当前用户: {{ uid }}</p>

  <router-link to="/user/lczmx">lczmx</router-link>

  <router-link to="/user/jack">jack</router-link>

</template>

<script lang="ts">

import { defineComponent, watch, ref } from "vue";

import { useRouter } from "vue-router";

export default defineComponent({

  name: "User",

  setup() {

    const router = useRouter();

    const uid = ref(router.currentRoute.value.params.uid);

    watch(

      // 监听非响应式数据

      () => router.currentRoute.value,

      (val) => {

        // 修改uid

        uid.value = val.params.uid;

      }

    );

    return {

      // 返回的数据

      uid,

    };

  },

});

</script>

使用组合API监听动态参数

https://next.router.vuejs.org/zh/guide/advanced/composition-api.html

重定向

下面使用router的全部参数:

const routes = [

    {

        path: "/",

        // 写法1 写死url

        // redirect: "/home", // 访问 "/" 时 跳转到 "/home"

        // 写法2 跳转到对应的命名路由

        redirect: { name: "home" },

        // 写法3 定义一个方法

		// 该方法亦可以 返回一个相对路径

        /*

        redirect: to => {

            // 方法接收目标路由作为参数 "to"

            // return 重定向的字符串路径/路径对象

			// query指定参数

            return { path: '/home', query: { q: to.params.searchText } }

        },

        */

    },

    {

        path: "/home",

        name: "home",

        component: Home

    }

]

注意, 重定向不会触发导航守卫

另附官网的例子: Named Views - Vue Router 4 examples

命名与别名

命名路由

给路由一个名称, 可以在其他路由中使用, 如: redirect和router-link

const routes = [

  {

    path: '/user/:username',

    name: 'user',

    component: User

  }

]

在redirect的使用如上文, 而router-link如下:

<template>

  <div>User组件</div>

  <p>当前用户: {{ uid }}</p>

  <router-link :to="{ name: 'user', params: { uid: 'lczmx' } }"

    >lczmx</router-link

  >

  <router-link :to="{ name: 'user', params: { uid: 'jack' } }"

    >jack</router-link

  >

</template>

在router.push(router是router对象)中使用:

router.push({ name: 'user', params: { uid: 'lczmx' } })

命名视图

即, 我们可以router-view定义一个名字, 已达到实现可复用的效果

我们可以使用这个功能实现一个侧边栏等

举个例子

定义路由:

import { createRouter, createWebHashHistory } from "vue-router"

import Home from '../components/Home.vue'

import About from '../components/About.vue'

import User from '../components/User.vue'

const routes = [

	{

		path: "/",

		components: {

			default: Home,  // 默认用Home组件

			a: About,  // a用About组件

			b: User,  // b用User组件

		},

	},

	{

		path: "/home",

		components: {

			default: About,   // 默认用About组件

			a: Home,  // a用Home组件

			b: User,  // b用User组件

		},

	},

]

export const router = createRouter({

	history: createWebHashHistory(),

	routes: routes

})

修改App.vue

<template>

  <div>{{ appMessage }}</div>

  <!-- router-link会被渲染成a标签 -->

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

  <router-link to="/home">/home</router-link>

  <!-- 路由出口 -->

  <!-- 路由匹配到的组件将渲染在这里 -->

  <!-- default -->

  <router-view></router-view>

  <router-view name="about"></router-view>

  <router-view name="user"></router-view>

</template>

<script lang="ts">

import { defineComponent } from "vue";

export default defineComponent({

  name: "App",

  setup() {

	const appMessage = "App组件";

	return {

	  // 返回的数据

	  appMessage,

	};

  },

});

</script>

<style>

/* 添加样式 */

#app {

  text-align: center;

  margin-top: 50px;

}

a {

  margin: 30px;

  display: inline-block;

}

</style>

其他组件

About.vue:

<template>

  <div>about组件</div>

</template>

Home.vue:

<template>

  <div>home组件</div>

</template>

User.vue

<template>

  <div>user组件</div>

</template>

启动服务并访问vue

如图:

假如不指定视图名, 那么为default

别名

可以实现不同url 访问同一路由的效果

const routes = [

    // 可以访问 "/home" 也可以访问 "/"

    // 且访问的路径不会改变

    {

        path: "/home",

        name: "home",

        component: Home,

        alias: "/"

    }

嵌套路由

之前我们在App.vue中定义router-view, 让其他组件在哪里渲染

但假如我们需要在其他组件中渲染的话, 就需要嵌套路由了

使用children嵌套路由, 它的值是路由数据, 就好像外部的router那样定义

例子:

router.index.ts

import { createRouter, createWebHashHistory } from "vue-router"

import Home from '../components/Home.vue'

import About from '../components/About.vue'

import User from '../components/User.vue'

import UserHome from '../components/UserHome.vue'

import UserSettings from '../components/UserSettings.vue'

import UserProfile from '../components/UserProfile.vue'

const routes = [

	// 可以访问 "/home" 也可以访问 "/"

	// 且访问的路径不会改变

	{

		path: "/home",

		name: "home",

		component: Home,

		alias: "/"

	},

	{

		path: "/about",

		name: "about",

		component: About

	},

	{

		path: "/user/:uid",  // 动态参数

		name: "user",

		component: User,  // 内部有router-view渲染要嵌套的路由

		children: [

			// 匹配形如 /user/lczmx 的url

			{ path: "", component: UserHome },

			// 匹配形如 /user/lczmx/settings 的url

			{ path: "settings", component: UserSettings, name: "user-settings" },

			// 匹配形如 /user/lczmx/profile 的url

			{ path: "profile", component: UserProfile, name: "user-profile" }

		]

	}

]

export const router = createRouter({

	history: createWebHashHistory(),

	routes: routes

})

注意: 假如children中没有path: ""的话, 那么访问/user/lczmx, 只能得到一个页面空白

User.vue

<template>

  <div>

	<router-link :to="{ name: 'user-settings' }">settings</router-link>

	<router-link :to="{ name: 'user-profile' }">profile</router-link>

  </div>

  <router-view></router-view>

</template>

UserHome.vue

<template>

  <div>用户主页</div>

</template>

UserProfile.vue

<template>

  <div>用户详细信息页面</div>

</template>

UserSettings.vue

<template>

  <div>用户设置页面</div>

</template>

启动并访问

在浏览器中测试:

编程式路由

即不通过a标签, 而不是通过js/ts改变路由, 原理是向history栈添加一个新的记录

在vue3中, 有以下写法

<template>

  <div>about组件</div>

  <button @click="changeRouter">修改路由</button>

</template>

<script lang="ts">

import { defineComponent } from "vue";

import { useRouter } from "vue-router";

export default defineComponent({

  name: "About",

  setup() {

    // 获得router对象

    const router = useRouter();

    const changeRouter = () => {

      /* 修改路由的例子 */

      // 1 字符串路径

      router.push("/users/lczmx");

      // 2 带有路径的对象

      router.push({ path: "/users/lczmx" });

      // 3 命名的路由，并加上参数，让路由建立 url

      router.push({ name: "user", params: { username: "lczmx" } });

      // 4 带查询参数，结果是 /register?plan=private

      router.push({ path: "/register", query: { plan: "private" } });

      // 5 带 hash，结果是 /about#team

      router.push({ path: "/about", hash: "#team" });

      // 6 我们可以手动建立 url，但我们必须自己处理编码

      const username = "lczmx";

      router.push(`/user/${username}`); // -> /user/lczmx

      // 同样

      router.push({ path: `/user/${username}` }); // -> /user/lczmx

      // 如果可能的话，使用 `name` 和 `params` 从自动 URL 编码中获益

      router.push({ name: "user", params: { username } }); // -> /user/lczmx

      // 7 `params` 不能与 `path` 一起使用, 否则 `params` 将会被忽略

      router.push({ path: "/user", params: { username } }); // -> /user

      // 8 replace为true 不向history 中添加

      router.push({ path: "/home", replace: true });

      // 等同于

      router.replace({ path: "/home" });

      // 9 横跨历史

      // 向前移动一条记录，与 router.forward() 相同

      router.go(1);

      // 返回一条记录，与router.back() 相同

      router.go(-1);

      // 前进 3 条记录

      router.go(3);

      // 如果没有那么多记录，静默失败

      router.go(-100);

      router.go(100);

    };

    return {

      // 返回的数据

      changeRouter,

    };

  },

});

</script>

<style>

button {

  margin: 30px;

}

</style>

更多见vue-router4官网: Vue Router

vue3+TypeScript+vue-router使用的更多相关文章

Vue3: 如何以 Vite 创建，以 Vue Router, Vuex, Ant Design 开始应用
本文代码: https://github.com/ikuokuo/start-vue3 在线演示: https://ikuokuo.github.io/start-vue3/ Vite 创建 Vue ...
vue3+typescript引入外部文件
vue3+typescript中引入外部文件有几种方法 (eg:引入echarts) 第一种方法: 1 indext.html中用script引入 <div id="app" ...
Vue Router路由管理器介绍
参考博客:https://www.cnblogs.com/avon/p/5943008.html 安装介绍:Vue Router 版本说明对于 TypeScript 用户来说,vue-router@ ...
Vue3 + TypeScript 开发实践总结
前言迟来的Vue3文章,其实早在今年3月份时就把Vue3过了一遍.在去年年末又把 TypeScript 重新学了一遍,为了上 Vue3 的车,更好的开车.在上家公司4月份时,上级领导分配了一个内部的 ...
基于SqlSugar的开发框架循序渐进介绍（14）-- 基于Vue3+TypeScript的全局对象的注入和使用
刚完成一些前端项目的开发,腾出精力来总结一些前端开发的技术点,以及继续完善基于SqlSugar的开发框架循序渐进介绍的系列文章,本篇随笔主要介绍一下基于Vue3+TypeScript的全局对象的注入和 ...
Vue 2.0 + Vue Router + Vuex
用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node.js(包括了 npm).vue-cli 项目结构如图所示: ass ...
vue router 只需要这么几步
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
Vue.js 2.x笔记：路由Vue Router（6）
1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...
在typeScript+vue项目中使用ref
因为vue项目是无法直接操作dom的,但是有时候开发需求迫使我们去操作dom. 两个办法,一个是很low的再引入jq,然后通过jq来操作,但是这样就失去了我们使用vue的意义, 可惜的是我曾经这样干过 ...

随机推荐

C++中union相关
前两天做阿里笔试遇到一个选择题题目大概是 #include <iostream> #include <stdlib.h> using namespace std; union ...
vim编码设置(转)
vim里面的编码主要跟三个参数有关:enc(encoding).fenc(fileencoding).fence(fileencodings) fenc是当前文件的编码,也就是说,一个在vim里面已经 ...
SpringAOP简单例子
这个只是个简单AOP例子,包括前置通知,后置通知,环绕通知,和目标对象.写这个例子的主要目标只是想让想学AOP的能更快地入门,了解一下如何去配置AOP里面的东东.目标对象的接口:IStudent.ja ...
Linux:sqlplus
[oracle@hb shell_test]$ cat echo_time #!/bin/sh 一.最简单的调用sqlplus sqlplus -S "sys/unimas as sysdb ...
【Spring Framework】Spring入门教程（四）注册Bean到IOC容器
注册Bean到IOC容器大致分为4种: ①.包扫描+组件注解(@Controller.@Service.@Repository.@Component) 针对类是我们自己编写的情况 ②.@Bean注解 ...
MFC入门示例之列表框(CListControl)
初始化: 1 //初始化列表 2 m_list.ModifyStyle(LVS_TYPEMASK, LVS_REPORT); //报表样式 3 m_list.InsertColumn(0, TEXT( ...
MyBatis中关于大于，小于写法
第一种写法(1): 原符号 < <= > >= & ' " 替换符号 < <= > >= & ' " ...
[MySQL实战-Mysql基础篇]-mysql的日志
参考文章: https://www.cnblogs.com/f-ck-need-u/archive/2018/05/08/9010872.html https://dev.mysql.com/doc/ ...
[BUUCTF]PWN——wustctf2020_closed
wustctf2020_closed 附件步骤: 例行检查,64位程序,开启了nx保护本地试运行一下看看大概的情况 64位ida载入,首先是检索程序里的字符串,找到了后门 main函数里的关键函数 ...
一道栈溢出babystack
我太天真了,师傅说让我做做这个平台的题,我就注册了个号,信心满满的打开了change,找到了pwn,一看第一道题是babystack,我想着,嗯,十分钟搞定他!直到我下载了题目,题目给了libc,然后 ...

vue3+TypeScript+vue-router使用