VueRouter的安装以及基本使用

待我称王封你为后i 2023-10-18 11:07 88阅读 0赞

### Vue Router ###

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

嵌套的路由/视图表  
模块化的、基于组件的路由配置  
路由参数、查询、通配符  
基于 Vue.js 过渡系统的视图过渡效果  
细粒度的导航控制  
带有自动激活的 CSS class 的链接  
HTML5 历史模式或 hash 模式，在 IE9 中自动降级  
自定义的滚动条行为

### 安装 ###

直接下载/CDN

在 Vue 后面加载 vue-router，它会自动安装的：

#### 通过npm安装 ####

npm install vue-router

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

import Vue from 'vue'
    import VueRouter from 'vue-router'
    
    Vue.use(VueRouter)

注意：Vue项目在初始化的时候不要集成vue-router

#### 构建开发版 ####

如果你想使用最新的开发版，就得从 GitHub 上直接 clone，然后自己 build 一个 vue-router。

git clone https://github.com/vuejs/vue-router.git node_modules/vue-router
    cd node_modules/vue-router
    npm install
    npm run build

### 使用 ###

1.安装并引入和明确使用

npm install vue-router
    
    import VueRouter from 'vue-router'
    
    Vue.use(VueRouter)

2.创建/定义路由

const router = new VueRouter({
        routes:[
          {
            path:"/",
            name:"HelloWorld",
            component:HelloWorld
          }
        ]
      })

3.给出路由显示的位置

<router-view />

比如：

4.将路由对象注入Vue实例

// 创建 router 实例，然后传 `routes` 配置
    // 你还可以传别的配置参数, 不过先这么简单着吧。
    const router = new VueRouter({
      routes // (缩写) 相当于 routes: routes
    })
    
    //  创建和挂载根实例。
    // 记得要通过 router 配置参数注入路由，
    // 从而让整个应用都有路由功能
    const app = new Vue({
      router
    }).$mount('#app')

6.路由跳转

<p>
        
        
        
        <router-link to="/foo">Go to Foo</router-link>
        <router-link to="/bar">Go to Bar</router-link>
      </p>

### 完整演示 ###

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

在线实例演示：

[https://jsfiddle.net/yyx990803/xgrjzsup/][https_jsfiddle.net_yyx990803_xgrjzsup]

vue-router实例代码：

[https://github.com/vuejs/vue-router/tree/dev/examples][https_github.com_vuejs_vue-router_tree_dev_examples]

[Image 1]: 
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20181109141526894.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[https_jsfiddle.net_yyx990803_xgrjzsup]: https://jsfiddle.net/yyx990803/xgrjzsup/
[https_github.com_vuejs_vue-router_tree_dev_examples]: https://github.com/vuejs/vue-router/tree/dev/examples