一、vue-router使用

1、下载npm i vue-router -S
2、安装插件Vue.use(VueRouter)
3、创建路由对象
var router = new VueRouter()
4、配置路由规则
router.addRoutes([路由对象])
路由对象{path:'锚点', component:需要显示的组件}
5、将配置好的路由对象交给Vue
6、使用组件<router-view></router-view>

二、代码示例

方法一、

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><script type="text/javascript" src="vue.js"></script><script type="text/javascript" src="vue-router.js"></script><div id="app"></div><script type="text/javascript"> var Login = { template: ` <div>登陆成功</div> ` } // 安装路由 Vue.use(VueRouter); // 创建路由 var router = new VueRouter(); // 配置路由规则 router.addRoutes( [ {path: '/login', component: Login} ] ) // 使用路由组件 new Vue({ el: '#app', router, template: ` <div> <p>留坑使用路由组件</p> <router-view></router-view></div> ` } )</script></body></html>

方法二、

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><script type="text/javascript" src="vue.js"></script><script type="text/javascript" src="vue-router.js"></script><div id="app"></div><script type="text/javascript"> var Login = { template: ` <div>登陆成功</div> ` } // 安装路由 Vue.use(VueRouter); // 创建路由 var router = new VueRouter({ // 配置路由对象 routes: [ {path: '/login', component: Login} ] } ); // 使用路由组件 new Vue({ el: '#app', router, template: ` <div> <p>留坑使用路由组件</p> <router-view></router-view></div> ` } )</script></body></html>