vue router入门(一)

案例1

 # app.js
var routes = [
    {
        path: '/',
        component: {
            template: `
            <div><h3>首页</h3></div>
            `
        }
    },
    {
        path: '/about',
        component: {
            template: `
            <div><h3>关于我们</h3></div>
            `
        }
    },
]
 
var router = new VueRouter({
    routes: routes
})
 
# 01.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id ="app">
        <div>
            <router-link to="/">首页</router-link>
            <router-link to="/about">关于</router-link>
        </div>
        <div>
            <router-view name="sidebar"></router-view>
        </div>
    </div>
    <script src="./vue.min.js"></script>
    <script src="./vue-router.js"></script>
    <script src="./app.js"></script>
</body>
</html>

案例2：传参和获取参数

 # app.js
var routes = [
    {
        path: '/user/:name',
        name: 'user',
        component: {
            template: `
            <div>
            <h3>我叫：{{$route.params.name}}</h3>
            <h3>我今年：{{$route.query.age}}岁了</h3>
            <router-link :to="'/user/' + $route.params.name + '/more'">更过信息</router-link>
            <router-view></router-view>
            </div>
            `
        },
]
 
var router = new VueRouter({
    routes: routes
})
 
# 01.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id ="app">
        <div>
            <router-link to="/user/王花花">王花花</router-link>
            <router-link to="/user/李栓蛋">李栓蛋</router-link>
        </div>
    </div>
    <script src="./vue.min.js"></script>
    <script src="./vue-router.js"></script>
    <script src="./app.js"></script>
</body>
</html>
 
# 第二个参数age通过浏览器地址栏传入
vue-router/01.html#/user/王花花?age=30

posted @ 2022-09-08 13:42 DogLeftover 阅读(13) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· vue router入门(二)

· vue router入门(三)

· 前端学习（2177）：vue-router得参数传递

阅读排行：
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 字符编码：从基础到乱码解决
· 提示词工程——AI应用必不可少的技术

vue router入门(一)

我的标签

合集 (4)

随笔分类 (1350)

阅读排行榜

推荐排行榜

	# app.js
	var routes = [
	{
	path: '/',
	component: {
	template: `
	<div><h3>首页</h3></div>
	`
	}
	},
	{
	path: '/about',
	component: {
	template: `
	<div><h3>关于我们</h3></div>
	`
	}
	},
	]

	var router = new VueRouter({
	routes: routes
	})

	# 01.html
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	</head>
	<body>
	<div id ="app">
	<div>
	<router-link to="/">首页</router-link>
	<router-link to="/about">关于</router-link>
	</div>
	<div>
	<router-view name="sidebar"></router-view>
	</div>
	</div>
	<script src="./vue.min.js"></script>
	<script src="./vue-router.js"></script>
	<script src="./app.js"></script>
	</body>
	</html>

	# app.js
	var routes = [
	{
	path: '/user/:name',
	name: 'user',
	component: {
	template: `
	<div>
	<h3>我叫：{{$route.params.name}}</h3>
	<h3>我今年：{{$route.query.age}}岁了</h3>
	<router-link :to="'/user/' + $route.params.name + '/more'">更过信息</router-link>
	<router-view></router-view>
	</div>
	`
	},
	]

	var router = new VueRouter({
	routes: routes
	})

	# 01.html
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	</head>
	<body>
	<div id ="app">
	<div>
	<router-link to="/user/王花花">王花花</router-link>
	<router-link to="/user/李栓蛋">李栓蛋</router-link>
	</div>
	</div>
	<script src="./vue.min.js"></script>
	<script src="./vue-router.js"></script>
	<script src="./app.js"></script>
	</body>
	</html>

	# 第二个参数age通过浏览器地址栏传入
	vue-router/01.html#/user/王花花?age=30