Vue 学习16——CLI路由

最新推荐文章于 2022-10-22 14:49:51 发布

winner_corl

最新推荐文章于 2022-10-22 14:49:51 发布

阅读量306

点赞数

分类专栏： vue 文章标签： vue路由 vue stylus

本文链接：https://blog.csdn.net/Sicily_winner/article/details/103937043

版权

本文介绍了在Vue CLI项目中如何配置和使用路由，包括在App.vue中添加router-link、设置路由、编写组件以及实现路由参数传递。同时，提到了在模板中获取路由参数的方法，以及使用命名的路由、路由重定向、过渡效果和keep-alive组件。

摘要由CSDN通过智能技术生成

㋀㋊

菜鸟教程

✎ 占位符

✎ 从新定义组件和路由

VueRouter作为插件import，紧接着就要使用Vue.use(VueRouter)作为全局变量

✎ 占位符

✎ 从新定义组件和路由

◆ App.vue添加跳转信息（router-link）

router-link会跟着to然后渲染到app.vue中的router-view位置，也就是当前项目的app.vue中的router-view被helloworld.vue组件替换；

uto的意思是：1、更新router-view位置； 2、指向指向to的资源路径，对应路径的文件；

<template>
	<div id="app">
		<router-link to="/home">home 组件跳转</router-link>
		<img src="./assets/logo.png">
		<router-view />
	</div>
</template>

◆ 路由配置

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/Home'


Vue.use(Router)

export default new Router({
	routes: [{
			path: '/',
			name: 'HelloWorld',
			component: HelloWorld
		},
		{
			path: '/home',
			name: 'Home',
			component: Home
		}
	]
})