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

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 组件来导航

效果如下：

点击登录，页面显示登录的路由

点击注册，页面显示注册的路由