# 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
浙公网安备 33010602011771号