vue-路由使用

路由安装

终端下载路由插件 npm install vue-router --save-dev

 

配置

在main.js中引入插件

//Router 为自定义名   vue-router 为插件的名字

import Vue from 'vue'

import Router from 'vue-router' 

 

注册使用

//注册使用 vue-router

Vue.use(Router)

 

配置路由

const router = new Router({
  routes : [
    {path : "/" ,name : "home" component: Home},
    {path : "/helloworld" , name : "helloworld",component: HelloWorld}
  ],
  mode : "history" //去掉路由地址后面的#
})

//可以将routes单独抽离出来 

const routes = [
    {
        path : "/" ,    //设置路由路径
        name : "home",
        component: Home   // home在main.js里面注册的组件名,将要跳转到的组件
    },

    {path : "/helloworld" , name : "helloworld",component: HelloWorld},

    {path : "*" , redirect: '/'}  //当点击不存在路径时 默认 跳转到路径 '/'
]

const router = new Router({
  routes,
25　　linkActiveClass: 'class'  //设置路由比标签选中颜色 26   mode : "history"
})

 

需要在main.js中 vue实例中引入router 

new Vue({
 router, 
  el: '#app',
  components: { App },
  template: '<App/>'
})

 

二级路由的设置

//二级路由在当前路由下添加 children数组 

const routes = [
    {
        path : "/about" ,  //设置路由路径
        name:'about',
        component: About,
        redirect: '/about1',  //设置当前页面默认显示的子路由
        children:[  //二级路由
            {path : "/about1" ,name:'about1', component: About1},
            {path : "/about2" ,name:'about2', component: About2},
            {path : "/about3" ,name:'about3', component: About3},
            {path : "/about3" ,name:'about3', component: About3},
          ]
    },
]

const router = new Router({
  routes,
  mode : "history"
})    

 

跳转的几种写法

标签<router-link to=""></router-link>

一、

<!-- to属性里面填入路径（在main.js中设置的路径） -->
2 <!-- tag属性可以设置 标签的展示 tag="div"标签是以div形式的展示 -->

<router-link tag="div" to="/home">首页</router-link>

二、

<!-- 通过 注册路由时设置的 name 属性 -->

<router-link :to="{name : 'home'}">首页</router-link>

通过name属性
{path : "/home" ,name:'home', component: Home},

三、

 

<!-- 可以动态设置路径 -->

<router-link :to="home">新闻</router-link>


<!-- 可以通过data动态设置路径 -->
data(){
  name : '/home'  
}

 

通过name属性实现<router-link></router-link>的复用 

 

<router-view name="home1"></router-view>

<router-view name="home2"></router-view>

<router-view name="home3"></router-view>

const routes = [
  {
    path : "/" ,  
    name:'home', 
    components: {   //components  这里有 s 
        default : Home,  //  当前的home页面
        //为复用的 路由设置 属性名
        'home1' : Home1,  
        'home2' : Home2,
        'home3' : Home3,
    
      }
    },
]