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中一致，这里不再累述。

转载于:https://www.cnblogs.com/lsboom/p/11384561.html