<!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">
//路由占位符
<router-view></router-view>
</div>
<script src="./vue.js"></script>
<script src="./vue-router_3.0.2.js"></script>
<script>
var App = {
template: `
<div>
App
<router-link to="/user/1">user</router-link>
<router-link to="/admin">admin</router-link>
//编程式导航
<a href="" @click.prevent="routeJS">js</a>
<router-view></router-view>
</div>
`,
methods: {
routeJS: function () {
// console.log(this.$router);
//编程式导航
// this.$router.push("/jsroute");
this.$router.go(-1);
},
},
};
var User = {
props: ["id"],
template: `<div>user{{$route.params.id}}{{id}}</div>`,
};
var Admin = {
template: `<div>Admin</div>`,
};
var router = new VueRouter({
routes: [
{
path: "/",
component: App,
//子路由
children: [
{
path: "/user/:id",
component: User,
props: true,
},
{ path: "/admin", component: Admin },
],
},
],
});
//将router挂载到vue实例
var vm = new Vue({
el: "#app",
router,
});
</script>
</body>
</html>