Vue路由

Posted 2021-01-17 lobin

route 路由

单组件路由

1. 切换到项目根目录 cd
2. 安装路由：cnpm install vue-router --save
3. 在main.js里面导入并且配置

3.1 导入vue-router并注册上

  ```
  import VueRouter from 'vue-router';

  Vue.use(VueRouter);
  ```

3.2 创建组件，并导入组件

  ```
  import homePage from './components/home-page.vue';

  import newsPage from './components/news-page.vue';
  ```

3.3 配置路由,定义路由->实例化路由->挂载路由

  ```
  const routes = [
    { path: '/home', component: homePage },
    { path: '/news', component: newsPage },

    { path: '*', redirect: '/home' }   /*默认跳转路由*/
  ]

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

  new Vue({
    el: '#app',
    router,
    render: h => h(App)
  })
  ```

1. 使用路由，在根组件App.vue的模板里

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

模块化路由

1. 新建一个文件夹，新建一个router.js文件，将原先在main.js里写的以下代码拷贝到router.js,注意组件路径
2. 在main.js里导入router.js，并挂载到vue