vue router入门(二)

案例1：子路由

 # 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>
            `
        },
        children: [
            {
                path: 'more',
                component: {
                    template: `
                    <div>
                    用户：{{$route.params.name}}的详细信息
                    more more more more more
                    </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>

案例2：手动访问路由和传参

 # app.js
new Vue({
    el: '#app',
    router: router,
    methods: {
        surf: function(){
            setTimeout(function(){
                this.router.push('/about')
                setTimeout(function(){
                    this.router.push({name: 'user',params: {name: '王花花'}})//路由对象需设置name
                })
            },2000)
        }
    }
})
 
# 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>
            <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>

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

刷新页面返回顶部

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

相关博文：

· vue router入门(一)

· vue router入门(三)

· vue - 路由器router

· vue02-路由

· 简单上手 Vue Router

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

vue router入门(二)

我的标签

合集 (4)

随笔分类 (1350)

阅读排行榜

推荐排行榜

	# 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>
	`
	},
	children: [
	{
	path: 'more',
	component: {
	template: `
	<div>
	用户：{{$route.params.name}}的详细信息
	more more more more more
	</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>

	# app.js
	new Vue({
	el: '#app',
	router: router,
	methods: {
	surf: function(){
	setTimeout(function(){
	this.router.push('/about')
	setTimeout(function(){
	this.router.push({name: 'user',params: {name: '王花花'}})//路由对象需设置name
	})
	},2000)
	}
	}
	})

	# 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>
	<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>