安装

NPM

npm install vue-router

如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：

// 从 NPM引入的包
import VueRouter   from 'vue-router'
// 引入自己写的router实例
import router from './router/router.js'

Vue.config.productionTip = false
Vue.use(VueRouter)
new Vue({
    
    
  render: h => h(App),
  router  // 挂载自己写的router实例
}).$mount('#app')

• 创建router.js 实例

import VueRouter from "vue-router";
import Demo from "../components/Demo";
import Happy from "../components/Happy";
import News from "../components/News";
import Message from "../components/Message";
import Content from "../components/Content";

export default new VueRouter({
    
    
    routes: [
        {
    
    
            path: '/demo', //跳转路径
            component: Demo,  //组件名称
            children: [   // 子组件
                {
    
    
                    path: 'news',
                    name: 'news',   // router命名
                    component: News,
                    children:[
                        {
    
    
                            path:'content/:id/:title',
                            name:'content',
                            component:Content
                        }
                    ]
                },
                {
    
    
                    path: 'message',
                    component: Message
                }
            ]
        },
        {
    
    
            path: '/happy',
            component: Happy
        }
    ]
})

• Home.vue 组件

<template>
<div>
    <router-link to="/demo">Demo</router-link>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <!--  * router跳转路由标签，替代<a></a>  -->
    
    <router-link to="/happy">Happy</router-link>
    
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  
  <router-view></router-view>
</div>
</template>