概述
路由是以插件的形式引入到我们的vue项目中来的
vue-router是vue的核心插件
1:创建路由对象 `var router = new VueRouter();
2:配置路由规则 `router.addRoutes([路由对象]);
路由对象`{path:'锚点值',component:要(填坑)显示的组件}`
3:将配置好的路由对象交给Vue
- ##### 在options中传递-> key叫做 router
4:留坑(使用组件) `<router-view></router-view>`
代码
var Login={
template:`
<div>我是登录页面</div>
`,
}
//安装路由插件
Vue.use(VueRouter);
//创建路由对象
var router= new VueRouter({
//配置路由对象
routes:[
{path:'/login',name:'login',component:Login}
]
})
new Vue({
el:'#app',
router,
template:`
<div>
<p>请在链接上加上login测试路由功能</p>
<router-view></router-view>
</div>
`,
data(){
return {}
},
})<!DOCTYPE html>
<html>
<head>
<title>路由的安装和使用</title>
</head>
<body>
<div id="app">
</div>
<script type="text/javascript" src="vue.js"></script>
<!-- 引入路由插件 -->
<script type="text/javascript" src="vue-router.js"></script>
<script type="text/javascript">
var Login={
template:`
<div>我是登录页面</div>
`,
}
//安装路由插件
Vue.use(VueRouter);
//创建路由对象
var router= new VueRouter({
//配置路由对象
routes:[
{path:'/login',name:'login',component:Login}
]
})
new Vue({
el:'#app',
router,
template:`
<div>
<p>请在链接上加上login测试路由功能</p>
<router-view></router-view>
</div>
`,
data(){
return {}
},
})
</script>
</body>
</html>
运行效果
版权声明：本文为lql_h原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。