vue路由基础

摘录自 “ 一个前端小小白 ”,请支持原作者

1----vue-router内置组件

​​router-link​​

类似于a标签，用于在单页面之间的跳转，默认渲染为a标签

  1. to属性,后面跟着用于跳转的路径
  2. tag属性，指定渲染成指定的标签（tab=“p”）
  3. router-link-active,自动激活的class名称，当·to·属性的值和地址栏路径相同自动激活该属性。
  4. linkActiveClass,自定义属性名称，在路由(reouter)的index.js中修改
const router = new VueRouter({
  linkActiveClass:'active',
  //添加linkActiveClass修改router-link-active成属性名称
  routes
})

2----页面之间的传值

1.query传值

通过 ​​html?id​​ 这种写法传值（query传值）

//向/about页面传递值
<div class="na" v-for="(item,index) in list" :key="item.name">
  <router-link :to="`/about?${item.id}&{item.name}`">
      //&间隔分隔传递的多个值
    // 通过?${item.name}将名字传递到/about的浏览栏上 -->
    {{item.name}}
  </router-link>
</div>

​​/about​​ 页面可以通过this的$route的query获取到传递的值

created(){
  //打印出传递的值
  console.log(this.$route.query)
},

2.动态路由传值

在router路由的 ​​index.js​​ 文件中创建动态路由

{
  //动态路由写法
  //path:'/info:tit',单个传递
  path:'/info:id/:name',//传递多个值
  component:Info
 }

需要传递值的页面进行传递

<router-link to="/info/这是传递的值1id/这是传递的值2name">
//to="/info:id  单个值传递
  跳转动态路由页面
</router-link>

​​/info​​ 页面对传递的值进行接收

created(){
  //通过params进行接收
  console.log(this.$route.params)
}

3----嵌套路由

一个页面中有多个子页面，就是嵌套路由
在注册路由的时候将路由定义 ​​​children:[子路由]​​

路由重定向，默认显示xxx路由

{
    path: '/',
    name: 'Home',
    component: Home,
    redirect："/name/a",
  children:[
    {
      path:'a',
      component:a
    },
    {
      path:'b',
      component:b
    },
    {
      path:'c',
      component:c
    }
  ]
  },

在主页面调用

<router-link to="/Home/a">a页面</router-link> 跳转a页面
<router-link to="/Home/b">b页面</router-link> 跳转b页面
<router-link to="/Home/c">c页面</router-link> 跳转c页面
<router-view>
  标签渲染a/b/c子路由页面
</router-view>

路由别名，声明多个名字也可访问该路由页面

{
    path: '/',
    name: 'Home',
  //给路由起别名,别名访问也可进去该路由页面
  alias:['/home','/home1']
    component: Home
  },

跳转

​​<router-link :to="{path: '/about'}">about页面</router-link>​​

jquery传值

​​<router-link :to="{path: '/about',query:{id:6}}">about页面</router-link>​​

动态路由传值，
并不能直接传值，要将path修改为name，利用name进行传递

​​<router-link :to="{name: 'about',params:{id:6,name:'张三'}}">about页面</router-link>​​

{
    path: '/about',
    name: 'about',
    component: about
  
  },

5----vue路由基础_jqueryrouter

​​$route​​

this.$route//是当前路由对象，用于获取当前路由里面的属性和方法

​​$router​​

this.$router//是所有路由对象可以理解为routes

​​$router​​ 也可以进行页面跳转

//1.
this.$router.push('/about')
//2.
this.$router.push({path: '/about'})
//3.跳转动态路由
this.$router.push({path: '/about/6/张三'})
//4.
this.$router.push({name: '/about',params:{id:6,name:'张三'}})
//5.跳转传值
this.$router.push("/about?id=7")
//6.跳转(去哪?)
$router.go(-1)
//7.回退
$router.back()
//8.前进
$router.forward()
//9.替换当前页面，不留历史记录
$router.replace()