Vue.js中vue-router的基础介绍及使用

- 日理万妓 2022-12-22 11:07 82阅读 0赞

# VueRouter简介 #

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

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

# 使用VueRouter #

**javascript**

1.  定义(路由)组件。

var login={ 
        template:'<h1>登录组件</h1>'
    }
    var register={ 
        template:'<h1>注册组件</h1>'
    }

2.定义路由

每个路由应该映射一个组件

const routes =[
        { path:'/login',component:login},
        { path:'/register',component:register}
    ]

`path`表示监听的路由地址  
`component`表示路由对应的组件

3.创建router实例

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

4.创建和挂载根实例

var vm=new Vue({ 
        el:'#app',
        data:{ },
        methods: { 
            
        },
        components:{ 
            login,
            register
        },
        router:routerObj
    })

--------------------

**HTML**

<div id="app">
      <h1>Hello!</h1>
      <p>
        <router-link to="/login">登录呀呀呀</router-link>
        <router-link to="/register">注册呀呀呀</router-link>
      </p>
      <router-view></router-view>
    </div>

`router-view`是路由的出口，路由匹配到的组件将渲染在这里  
使用 `<router-link>`组件来导航,通过传入 `to` 属性指定链接.  
`<router-link>` 默认会被渲染成一个 `<a>` 标签使用 router-link 组件来导航

效果如下：

点击登录，页面显示登录的路由  
![在这里插入图片描述][20201119205620287.png_pic_center]

点击注册，页面显示注册的路由  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center]

[20201119205620287.png_pic_center]: /images/20221120/1e4284346bc1453e99901bd13f8e9881.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/09cb1ae48dfd4289b3f766352efdb489.png