一、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>