vueRouter怎么用?

VueRouter有两个重要标签   <router-link>  <router-view>

 

<router-link>点击部分

<router-view>显示部分

 

<router-link>有一个重要的属性 to 定义了点击之后，去到那里。

<router-link to="/home"></router-link>

 

执行过程：

当用户点击<router-link>时，会去寻找他的to属性，它的to属性和router.js中配置的路径{path：‘/home’} path一一对应，从而找到匹配的组件，最后把组件渲染到<router-view>标签所在的位置。

 

使用方式：

①创建项目

在src的views下创建两个组件home.vue  about.vue

②在App.vue中定义<router-link>和<router-view>

<template>
    <div id="app">
          <router-link to="/home"></router-link>
         <router-link to="/about"></router-link>
         <router-view></router-view>
    </div>
</template>

 

③在scr目录下的router下的index.js  定义router

import vue from 'vue';
import VueRouter from 'vue-router';
import Home from './home.vue';
import About from './about.vue';

Vue.user(VueRouter);

const routes[{
   path:'/home',
   name:Home,
   component:home
   children:[{
       path:'child',
       name:Child,
       component:child
   }]
 },
 {
    path:'/about',
    name:About,
    component:about

 }]




const router=new VueRouter({
        routes
})

expoet default router;

　　

④把路由注入到根实例中，启动路由  main.js

import Vue from 'vue';

import App from './App.vue';
//引入路由

import router from '../index.js';

new Vue({
  el:"#app",
  router

}).$mount('#app')