vue-router 的基本使用

vue-router 基本使用

路由，起始就是指向的意思
路由中有三个基本的概念 route、routes、router

• route 是一条路由， news按钮 => news内容，这是一条路由， submit按钮 => submit内容，这是另一条路由
• routes 是一组路由，把上面的每一条路由组合起来，形成一个数组 [{news按钮 => news内容}, {submit按钮 => submit内容}]
• router 是一个机制，相当于一个管理者，它来管理路由
• 客户端中的路由，实际上就是dom元素的显示和隐藏，当页面中显示news内容的时候，submit中的内容全部隐藏，反之也是一样。客户端路由有两种实现方式：基本hash和基本 html5 history api

vue-router 中的路由也是基于上面的内容来实现的

在vue中实现路由还是相对简单的，因为我们页面中所有内容都是组件化的，我们只需要把路径和组件对应起来就可以了，然后在页面中把组件渲染出来。

页面实现（html模板中）

在 vue-router中，定义了两个标签 <router-link> 和 <router-view> 来对应点击和显示部分。 
<router-link> 就是定义页面中点击的部分， <router-view> 定义显示部分
 就是点击后，匹配的内容显示在什么地方，所有 <router-link> 还有一个非常重要的属性 to
定义点击之后，去到相对应的地方

<router-link to="/news">News</router-link>

js中配置路由

// 定义route，是一个对象 由path和component组成，path指路径，component指的是组件 如：{path:'/news', component: news}

// 这里有两条路由，组成一个routes

const routes = [
   { path: '/news', component: News },
   { path: '/submit', component: Submit }
]

// 最后创建 router 对路由进行管理，它是由构造函数 new VueRouter() 创建，接受 routes参数

const router = new VueRouter({
   routes  // routes: routes 的简写
})

// 配置完成后，把router实例注入到 vue 根实例中，就可以使用路由了

const app = new Vue({
   router
}).$mount('#app')

执行过程中：当用户点击 标签时，会去寻找它的 to 属性，它的 to 属性和 js 中配置的路径 path 一一对应，从而找到了匹配的组件，最后把组件渲染到 标签所在的地方，所有的这些实现次啊是基于 hash 实现的

vue-cli 创建一个项目体验一下，当然不要忘记安装 vue-router

1、 在src目录下新建两个组件，news.vue 和 submit.vue

<template>
   <div>
      <h1>news</h1>
      <p>{{msg}}</p>
   </div>
</template>
<script>
   export default{
      data (){
         return{
           msg:"我是news组件"
         }
      }
   }
</script>

<template>
   <div>
      <h1>submit</h1>
      <p>{{msg}}</p>
   </div>
</template>
<script>
   export default{
      data (){
         return{
           msg:"我是submit组件"
         }
      }
   }
</script>

2、 在 App.vue 中定义 和

<template>
  <div id="app">
    <header>
      <!--router-link 定义点击后导航到哪个路径下-->
      <router-link to="/news">News</router-link>
      <router-link to="/submit">Submit</router-link>
    </header>
    <!-- 对应的组件内容渲染到 router-view 中 -->
    <router-view></router-view>
  </div>
</template>
<script>
export default{
}
</script>

3、在 src 目录下再新建一个 router.js 定义 router，就是定义路径到组件的映射

import Vue from 'vue'
import VueRouter from 'vue-router'

// 引入组件
import news from './news.vue'
import submit from './submit.vue'

// 要告诉 vue 使用 vueRouter
Vue.use(VueRouter)

const routes = [
   { path:'/news', component:news },
   { path:'/submit', component:submit },
]

var router = new VueRouter({
  routes
})
export default router

4、把路由注入到根实例中，启动路由。这里其实还是有一种方法，就像 Vuex store 注入到根实例中一样，我们也可以把vueRouter 直接注入到根实例中，在main.js中引入路由，注入到根实例中

import Vue from 'vue'
import App from './App.vue'

// 引入路由
import router from './router.js'

new Vue({
  el:'#app',
  router, // 注入到根实例中
  render: h => h(App)
})

5、这是点击页面上的 news 和 submit 可以看到组件来回切换，但是首次进入页面的时候，页面中并没有显示任何内容，这是因为首次进入页面时，它的路径是’ / '，我们并没有给这个路径做相应的配置， VueRouter来定义重定向

const routes = [
    {
        path:"/news",
        component: news
    },
    {
        path: "/submit",
        component: submit
    },
    {
        path: '/', 
        redirect: '/news' 
    }
]

现在页面正常了，首次进入显示 news，并且点击也可以看到内容的切换