vue路由笔记

最新推荐文章于 2024-11-12 11:46:53 发布

WRSR52

最新推荐文章于 2024-11-12 11:46:53 发布

阅读量551

点赞数 1

分类专栏：笔记文章标签： git github vue.js

本文链接：https://blog.csdn.net/WRSR52/article/details/121373354

版权

笔记专栏收录该内容

70 篇文章 0 订阅

订阅专栏

什么是路由：

基于vue组件化的思想

从用户发起一个请求，一直到展示指定组件，这个过程就是vue路由负责的

使用步骤: vue.js + vue-router.js 引入到网页中

测试代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入js文件 -->
		<!-- 注意顺序 -->
		<script src="vue.js"></script>
		<script src="vue-router.js"></script>
	</head>
	<body>
		<!-- 准备数据渲染区，即将展示组件功能 -->
		<div id="a">
			<!-- 点击不同的元素，匹配到不同的组件 -->
			<router-link to="/home">主页</router-link>
			<router-link to="help">帮助页</router-link>
			<!-- 展示组建的内容 -->
			<router-view></router-view>
		</div>
		<!-- 创建一个vue对象 -->
		<script>
			//创建组件，让路由动态匹配
			var home={
				template:"<h1>我是主页...</h1>"
			}
			var help={
				template:"<h1>我是帮助页...</h1>"
			}
			// 创建路由的细则
			// VueRouter表示vue路由对象，router属性用来描述细则
			var router=new VueRouter({
				routes:[
					//根据不同的请求，路由到不同的组件
					//路径:访问路径,component：组件名称
					{path:"/home",component:home},
					{path:"/help",component:help}
				]
			})
			
			
			
			new Vue({
				el:"#a",
				//设置路由功能
				//router:router,//key和value一样时可以简写
				router//同上，简写形式
			})
		</script>
	</body>
</html>

测试代码2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js"></script>
		<script src="vue-router.js"></script>
	</head>
	<body>
		<div id="app">
		<router-link to="/runoob">runroob</router-link>
		<router-link to="/w3c">w3c</router-link>
		<router-view></router-view>
		</div>
		<script>
			var runroob={
				template:"<a href='https://www.runoob.com/css3/css3-tutorial.html'>https://www.runoob.com/css3/css3-tutorial.html</a>"
			}
			var  w3c={
				template:"<a href ='https://www.w3school.com.cn/'>https://www.w3school.com.cn/</a>"
			}
			var router =new VueRouter({
				routes:[
				{path:"/runoob",component:runroob},
				{path:"/w3c",component:w3c}
				]
			})
			new Vue({
				el:"#app",
				router
			})
		</script>
	</body>
</html>

路由解析图

在vue项目中创建路由

1.自定义组件t1

<template>
 <h1>我是t1</h1>
</template>

<script>
</script>

<style>
</style>

2.自定义组件t2

<template>
  <h1>我是t2</h1>
</template>

<script>
</script>

<style>
</style>

3.自定义路由router.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
//引用自定义组件位置
import t1 from '@/components/t1'
import t2 from '@/components/t2'

Vue.use(Router)

export default new Router({
  routes: [
    //定义路由的细则，什么请求路由到那个组件
    {path: '/',component: HelloWorld},
    {path:'/t1',component:t1},
    {path:'/t2',component:t2}
  ]
})

4.修改 app.vue使用路由

<template>
  <div id="app">
    <!-- //3.使用了自定义组件 -->
    <person></person>
    <Student></Student>
    <router-link to="/t1">t1</router-link>
    <router-link to="/t2">t2</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
 //1.导入指定的自定义文件
 import Student from'./components/Student.vue'
   import person from './components/person.vue'

export default {
  name: 'App',
  components:{//2.添加组件
    person,//使用第一步导入成功的组件名
    Student
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>