VUE 组件 中路由

周大胖子

其实和angular真像；
在大地老师的白话中，大致分为五步走
1. 安装vue-router 模块；cnpm install vue-router --save
2. 在main.js中引入 该中间件 并且使用

1. import VueRouter from 'vue-router'
3. Vue.use(VueRouter);

复制代码

3.配置该路由    3.1创建 组件并且引入 【就是在个Home.vue 文件和 News文件，然后在main.js中引入】
    3.2定义路由

1. const routes = [
2.   { path: '/home', component: Home },
3.   { path: '/news', component: News },

复制代码

   3.3实例化路由

1. const router = new VueRouter({
2.   routes // short for `routes: routes`
3. })

复制代码

4.挂载

1. new Vue({
2.   // 4
3.   router,
4.   render: h => h(App),
6. }).$mount('#app')

复制代码

5.在App.vue中使用 该标签 规定路由区域

1. <router-view></router-view>

复制代码

代码全部公开
main.js

1. import Vue from 'vue'
2. import App from './App.vue'
4. // 3.1
5. import Home from './components/Home'
6. import News from './components/News'
8. import VueRouter from 'vue-router'
10. Vue.use(VueRouter);
12. // 3.2
13. const routes = [
14.   { path: '/home', component: Home },
15.   { path: '/news', component: News }
16. ]
17. const router = new VueRouter({
18.   routes // short for `routes: routes`
19. })
21. Vue.config.productionTip = false
23. new Vue({
24.   // 4
25.   router,
26.   render: h => h(App),
28. }).$mount('#app')

复制代码

app.vue

1. <template>
2.   <div id="app">
3.     <hr>
4.     <router-link to="/home">首页</router-link>
5.     <router-link to="/news">新闻</router-link>
7.     <router-view></router-view>
8.   </div>
9. </template>
11. <script>
13. export default {
14.   
15.   data(){     //业务逻辑定义的数据
16.     return {
17.        msg2:'哈哈哈'
18.         
19.     }
20.    
21.   }
22.   ,methods:{        //存放VUE的方法
23.      
24.   }
25.   ,name: 'app',
26.   components: {
28.   }
29.   
30. }
31. </script>
33. <style>
34. #app {
35.   font-family: 'Avenir', Helvetica, Arial, sans-serif;
36.   -webkit-font-smoothing: antialiased;
37.   -moz-osx-font-smoothing: grayscale;
38.   text-align: center;
39.   color: #2c3e50;
40.   margin-top: 60px;
41. }
42. .red{
43.   color:red;
44. }
45. .blue{
46.   color:blue;
47. }
48. </style>

复制代码

{ path: '*', component: Home} 默认首页