有时候，我们在用vue的时候会有这样的需求，比如一个管理系统，点了左边的菜单栏，右边跳转到一个新的页面中，而且刷新的时候还会停留在原来打开的页面。
又或者，一个页面中几个不同的画面来回点击切换，这两种情况都可以用vue router路由来解决。
1，js的引用
<script src="https://cdn.bootcss.com/vue/2.4.0/vue.js"></script> <script src="https://cdn.bootcss.com/vue-router/2.4.0/vue-router.js"></script>
2，代码
<body>
<div id="app">
<div>
<!--
router-link to属性就是指向某个具体的链接，链接的内容会被渲染到router-view标签中
router-link会被渲染成a标签，例如第一个会变成<a href="#/first">第一个页面</a>,前面加了个#
-->
<router-link to="/user">用户管理</router-link>
<router-link to="/company">商家管理</router-link>
</div>
<router-view></router-view>
</div>
</body>
</html>
<script>
/*
* 申明三个模板
*/
var user = { template: '<p>用户信息</p>' };
var company = { template: '<p>操作用户</p>' };
/*
* 定义路由，component属性是通过 Vue.extend() 创建的组件构造器，或者，只是一个组件配置对象。
*/
var routes = [
{ path: '/user', component: user },
{ path: '/company', component: company },
];
/*
* 创建VueRouter实例
*/
var router = new VueRouter({
routes:routes
});
/*
* 给vue对象绑定路由
* .$mount("#app")手动挂载，用来延迟挂载，跟
* const app = new Vue({
* el:"#app"
* router
* });
* 效果是一样的
*/
const app = new Vue({
router
}).$mount("#app");
</script>
效果:
路由传参
/*路径后添加参数*/ var routes = [ { path: '/user/:id', component: user }, { path: '/company', component: company }, ];
$route可以获取路由信息
var user = { template: '<p>用户信息{{$route.params.id}}</p>' };
浙公网安备 33010602011771号