1.vue-router相当于vue的第三方数据库。
用处1.通过不同的url访问不同的页面，实现spa(singlepageapplication)单页面应用。下载：npminstallvue-router引用：先引用vue.js在引用vue-router.js
2.路由的建立步骤
<!DOCTYPE html>Document.active{color: red }首页详情页/* 2.创建组件*/varHome={template:`
<h1>我是首页的内容</h1>
`}varDetail={template:`
<h1>我是详情页的内容</h1>
`}/*3.配置路由*/constroutes=[ {path:"/",component:Home}, {path:"/home",component:Home}, {path:"/detail",component:Detail} ]/* 4.创建路由实例*/constrount=newVueRouter({routes:routes,linkActiveClass:"active"//默认：linkActiveClass})/*5.把路由挂到vue的实例上*/newVue({el:"#app",router:rount })
3.路由的嵌套
<!DOCTYPE html>Document.active{color: red }首页详情页/* 2.创建组件*/varHome={template:`
<h1>我是首页的内容</h1>
`}varDetail={template:`
<div>
<h1>我是详情页的内容</h1>
<ul>
<li>
<router-link to="/detail/deng">登录</router-link>
</li>
<li>
<router-link to="/detail/zhu">注册</router-link>
</li>
</ul>
<router-view></router-view>
</div>
`}varDeng={template:`
<h1>这是登录页面</h1>
`}varZhu={template:`
<h1>这是注册页面</h1>
`}/*3.配置路由*/constroutes=[ {path:"/",component:Home}, {path:"/home",component:Home}, {path:"/detail",component:Detail,children:[ {path:"deng",component:Deng}, {path:"zhu",component:Zhu} ] } ]/* 4.创建路由实例*/constrount=newVueRouter({routes:routes,linkActiveClass:"active"//默认：linkActiveClass})/*5.把路由挂到vue的实例上*/newVue({el:"#app",router:rount })
4.路由的传参
我是首页的内容
} var Detail={ template:
我是详情页的内容
登录
注册
} var Deng={ template:
这是登录页面
{{$route.query}}以对象的形式输出
{{$route.query.uname}}
} var Zhu={ template:
这是注册页面
{{$route.params}}以对象的形式输出
{{$route.params.name}}
` } /3.配置路由/ const routes=[ {path:"/",component:Home}, {path:"/home",component:Home}, { path:"/detail", component:Detail, children:[ {path:"deng",component:Deng}, {path:"zhu/:name/:age",component:Zhu} ] } ] /* 4.创建路由实例/ const rount=new VueRouter({ routes:routes, linkActiveClass:"active"//默认：linkActiveClass }) /5.把路由挂到vue的实例上*/ new Vue({ el:"#app", router:rount })
网友评论