vue-router使用简介
vue-router使用简介
在我们的vue项目中不免会用到vue-router,那么我们具体应该怎么用呢?我们从几个简单的例子来讲,直接上代码:
1 // router.js 2 import Vue from 'vue' 3 import VueRouter from 'vue-router' 4 import Login from '@components/login' 5 import Register from '@component/register' 6 import Home from '@component/home' 7 import Info from '@component/info' 8 9 Vue.use(Router) 10 const exampleRouter = [ 11 { 12 path: '/login', 13 name: 'login', 14 component: { Login } 15 }, 16 { 17 path: '/register', 18 name: 'register', 19 component: { Register } 20 }, 21 { 22 path: '/home', 23 name: 'home', 24 component: { Home }, 25 children: [ 26 { 27 path: '/info', 28 name: 'info', 29 component: { Info } 30 } 31 ] 32 } 33 ] 34 export default new VueRouter({ 35 routes: exampleRouter 36 })
上面我们已经定义好了一个路由对象,现在找到我们页面的main.js:
1 // main.js 2 import Vue from 'vue' 3 import router from '@/router/router.js' 4 import Main from '@component/main' 5 6 new Vue({ 7 el: '#app', 8 router, 9 render: h => h(Main) 10 })
找到app.vue:
1 // app.vue 2 <template> 3 <div id="app"> 4 <!-- nothing --> 5 </div> 6 </template> 7 <script> 8 export default { 9 name: 'App', 10 data() { 11 return {} 12 } 13 } 14 </script>
在main.vue中进行我们的路由跳转,部分代码如下:
1 <template> 2 <div id="main"> 3 <ul> 4 <router-link to="/login" tag="li">login</router-link> 5 <router-link to="/register" tag="li">register</router-link> 6 <router-link to="/home" tag="li">home</router-link> 7 </ul> 8 <router-view></router-view> 9 </div> 10 </template>
可是我们在router.js中定义了四个路由,以上只展示了三个,还有一个子路由info我们则需要在跳转的home页面去使用了,具体写法和main.vue中一致,这里不再累述。