vue 路由router

路由可以让根组件自动挂载不同的组件。即可以动态的挂在而不用手动挂载。

1. 安装
 npm install vue-router --save

2. 在main.js 里引入并使用
import VueRouter from 'vue-router'
Vue.use(VueRouter)

3. 配置路由
  （1）创建组件，引入组件
  （2）定义路由
 const routes[
{path:'/foo', component: Foo},
{path:'/bar', component: Bar}
]
   (3)实例化VueRputer
const router = new Vuerouter({
routes //(缩写）相当于routes:routes
})
   (4)挂载
new Vue（{
 el:'#app',
router,
render: h=>(App)
})
 （5）在App.vue里面<router-view></router-view>
   (6)在App.vue里面
<router-link to="/foo">go to Foo</router-link>
<router-link to="/bar">go to Bar</router-link>

next is the App.vue

 1 <template>
 2 
 3 
 4   <div id="app"> 
 5 
 6 
 7     <router-link to="/home">首页</router-link>
 8     <router-link to="/news">新闻</router-link>
 9 
10     <hr>
11 
12        <router-view></router-view>
13 
14   </div>
15 </template>
16 
17 <script>
18 
19    export default {     
20       data () { 
21         return {
22          
23          msg:'你好vue'
24         }
25       }
26      
27     }
28 </script>
29 <style lang="scss">
30 
31 
32 </style>

next is the main.js

 1 import Vue from 'vue';
 2 import App from './App.vue';
 3 
 4 
 5 
 6 import VueRouter from 'vue-router';
 7 
 8 Vue.use(VueRouter);
 9 
10 
11 //1.创建组件
12 
13 
14 import Home from './components/Home.vue';
15 
16 import News from './components/News.vue';
17 
18 
19 //2.配置路由   注意：名字
20 
21 const routes = [
22   { path: '/home', component: Home },
23   { path: '/news', component: News },
24 
25   { path: '*', redirect: '/home' }   /*默认跳转路由*/
26 ]
27 
28 
29 //3.实例化VueRouter  注意：名字
30 
31 const router = new VueRouter({
32   routes // （缩写）相当于 routes: routes
33 })
34 
35 
36 
37 
38 //4、挂载路由
39 
40 new Vue({
41   el: '#app',
42   router,
43   render: h => h(App)
44 })
45 
46 
47 //5 <router-view></router-view> 放在 App.vue

猜你喜欢