Vue简单创建一个项目（八）

Vue的路由实际上就是在APP根组件的挂载组件中做不同的切换，就是动态的去挂载。

vue-router（这个和vue-resource一样都是Vue自己的仔）

cnpm install vue-router --save

在main.js引入：

import VueRouter from ‘vue-router’;
Vue.use(VueRouter);

之前我们做的父子组件都是把子组件作为父组件的一个模块去调用的，然而我们现在是路由切换，那就不是一个概念了，而是相当于页面跳转了。

在main.js里面我们可以引用要跳转的组件：
A->Home
B->News

import Home from ‘./components/Home.vue’;

import News from ‘./components/News.vue’;

定义路由：

const routes = [
  { path: '/home', component: Home },
  { path: '/news', component: News },
]

实例化VueRouter 注意：名字

const router = new VueRouter({ routes // （缩写）相当于 routes: routes })

上面我要提一嘴：const xxx=[]里的xxx ,必须与
new VueRouter({   routes ：xxx })里的xxx对应上！！！

挂载路由

new Vue({
  el: '#app',
  router,//在这个地方挂载
  render: h => h(App)
})

路由展示的地方要根据位置而定，当前是放在APP根组件里的

<router-view></router-view> 放在 App.vue

这个时候其实你要输入的网址就是：

127.0.0.1：8080/#/home

或者是:

127.0.0.1：8080/#/news

可以做类似a标签跳转的链接：

<router-link to="/home">首页</router-link>
<router-link to="/news">新闻</router-link>

重定向别名的意思就是，我想让项目在加载组建的时候就设定为我喜欢的，或者让别人眼前一亮的页面！！！很通俗易懂吧！！！

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

  { path: '*', redirect: '/home' }   /*默认跳转路由，这个就是重定向*/
]