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,
　　linkActiveClass: 'class'  //设置路由比标签选中颜色
   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,
 
      }
    },
]