超简单的VueRouter快速上手

连永胜
1,156 阅读4分钟

开始啦

新手入坑，求大佬轻喷, Thanks♪(･ω･)ﾉ

起步：

需要vue-router库
cnpm i vue vue-router -D
npm安装的vue导入的是这个目录下面的文件：vue/dist/vue.esm

上手：

要在页面中使用vuerouter，至少需要

  1. 容器 : router-view
  2. 路由表 : router

容器：router-view

    new Vue({
        el:'#app',
        router,
        template : 
        `
        <div>
            <router-link to='/a'>news</router-link>
            <router-view></router-view>
        </div>
        `
    })

路由表：

    let router = new VueRouter({
        routes : [
            {
                name : 'news',
                path : '/a',
                component : {
                    template : `<div>a组件</div>`
                }
            }
        ]
    })

然后将路由表挂载到容器上就成了(￣▽￣)~*
其中，容器(router-view)的作用就是用来放置对应路由的组件的
router-link : 类似于a标签，用来切换路由的(其实最终会被编译成a标签)

入门

用a标签和用router-link切路由

当然，我们也可以用a标签来切换地址：
用 a 切地址，

<a href='#/a'>news</a>

井号(#)：锚点，不会导致页面刷新，history不会失效
官方建议用router-link,可能内部会做一些优化？
还有其他好处，比如：

  1. 可以加class
    .user-link-active: 激活的时候显示(自动添加这个class)
  2. 可以通过名字跳转： <router-link class='' :to'{name:news}'></router-link>
  3. 传参方便： <router-link class='' :to'{name:news,params:123}'></router-link>

routes中的一项可以有名字,可以传参-->通过':'传参
$route:路由信息 (Vue内部的一些属性都以$开头)

{
  path:'/a/:id',
  name:'news',
  component:{
    template:`
      <div class="">
        {{$route.params.id}}
      </div>
    `
  }
}

路由可以重叠：

匹配多个路由路径，走前面那个

    let router = new VueRouter({
        routes:[
            {
                path:'/',
                name:'news',
                component:{
                    template:'<div>aaa</div>'
                }
            },
            {
                path:'/',
                name:'sports',
                component:{
                    template:'<div>bbb</div>'
                }
            }
        ]
    })

如上路由表，如果路径为#/,则显示前面路由中的组件

js控制路由跳转：

两种方式：

  1. this.$router.push('/news/19')
  2. this.$router.push({name:'news',params:{}})
let vm = new Vue({
    el:'#root',
    methods:{
        toA(){
            this.$router.push('a')//不要写成'/a'
        },
        toB(){
            this.$router.push('b')
        }
    },
    router
})

极易搞混淆的两个变量,只相差一个字母(；´д｀)ゞ：

  1. 获取路由信息：$route
  2. 操作路由：$router

$router支持的函数：

  1. push() 入栈 (history相当于一个栈)
  2. replace()替换当前历史记录，不希望用户回来
  3. go(int) go(-1):后退 go(1):前进

监视路由

watch:{
  //监视路由，不能阻止
  $route(value,old_value){
    //要进行的操作...
  }
}

多视图

vue的路由是支持多视图的

  1. routes中的组件component改为components，放置一个对象，再给每一个组件起个名字：
  2. 注册容器(router-view)时，给每个容器加一个name属性对应相应的组件

这样，每当匹配到相应的路径，路由表中的组件们，就会去找router-view中相应的name，然后对号入座了ヽ(￣▽￣)ﾉ
需要注意的是，router-view中的属性是name而不是component

let headerCompA = {template:'<div>headerAAA</div>'}
let footerCompA = {template:'<div>footerAAA</div>'}
let headerCompB = {template:'<div>headerBBB</div>'}
let footerCompB = {template:'<div>footerBBB</div>'}
let router = new VueRouter({
    routes:[
        {
            path:'/a',
            name:'news',
            components:{
                headerComp:headerCompA,
                footerComp:footerCompA
            }
        },
        {
            path:'/b',
            name:'sports',
            components:{
                headerComp:headerCompB,
                footerComp:footerCompB
            }
        },
    ]
})
let vm = new Vue({
    el:'#root',
    router,
    //可以有一个视图不给名字
    template:`
    <div>
        <router-link to="/a">go to a</router-link>
        <router-link to="/b">go to b</router-link>
        <router-view name='headerComp'></router-view>
        <router-view name='footerComp'></router-view>   
    </div>
    `
})

路由嵌套：

vue的路由中其实是还可以嵌套其他路由的：只需要路由表下路由的一个属性children

注意：

  1. vue嵌套路由路径的连接并不是像koa一样的字符串连接,在子路由表的path中不需要加 '/'
  2. children其实也是一个路由表，只不过它以数组的形式表现出来

一个嵌套路由的小例子:

文件目录结构:

src
  vm.js
  router.js
  components
    header.js
    home.js
    news1.js
    news2.js

主文件(入口):

import Vue from 'vue/dist/vue.esm'
import VueRouter from 'vue-router'
import router from './router'  //导入路由表

Vue.use(VueRouter);
new Vue({
    el:'#root',
    router,
    template:`
    <div>
        <router-view></router-view>
        <router-view name='content'></router-view>
    </div>
    `
})

路由表：

import VueRouter from 'vue-router'
import news,{router as news_router} from './components/news';
import home from './components/home';
import header from './components/header';

export default new VueRouter({
    routes:[
       {
           path:'/news',
           name:'news',
           components:{
               default:header,
               content:news
           },
           children: news_router
        },
       {
           path:'/home',
           name:'home',
           components:{
               default:header,
               content:home
           }
       }
    ]
})

组件(们)：

header:

export default {
    template:`<div>
        <router-link to='/home'>首页</router-link>
        <router-link to='/news'>新闻</router-link>
    </div>`
}

home:

export default {
    template:`<div>home</div>`
}

news:
这里有一个小技巧，将news的路由表放进news.js文件里，导入的时候一起导入，这样结构更清晰

export default {
    template: `
    <div>
        <router-link :to="{name:'news1'}">to news1</router-link>
        <router-link :to="{name:'news2'}">to news2</router-link>
        <div>news</div>
        <router-view></router-view>
    </div>
    `
}
import news1 from './news1';
import news2 from './news2';

export let router = [
    {
        path: 'news1',
        name: 'news1',
        component: news1
    },
    {
        path: 'news2',
        name: 'news2',
        component: news2
    }
]
news的组件

news1

export default {
    template:`<div>news1</div>`
}

news2

export default {
    template:`<div>news2</div>`
}

最后：

avatar
文章
阅读
粉丝