vueRouter路由 知识点合集（一）

vueRouter路由 知识点合集（一）

vueRouter路由 知识点合集（二）

vueRouter路由 知识点合集（三）

vueRouter路由 知识点合集（四）

vue-router 由 路由表 导航（router-link ）容器（router-view）三部分组成

router-link

<!-- router-link 最终会被渲染成a标签，to指定路由的跳转地址 -->
<router-link to="/users">用户管理</router-link>
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>

to

表示目标路由的链接。当被点击后，内部会立刻把 to 的对应路由表的path

// 配置路由规则
var router = new VueRouter({
routes: [
   { name: 'home', path: '/', component: Home },
   { name: 'users', path: '/users', component: Users }
]
});

to 形式

	<!-- 不写 v-bind 也可以，就像绑定别的属性一样 -->
<router-link :to="'home'">Home</router-link>

<!-- 同上 -->
<router-link :to="{ path: 'home' }">Home</router-link>

<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

<!-- 带查询参数，下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}"
  >Register</router-link
>

动态路由

当path不同却需要对应同一个组件时,需要用到动态路由

1. 路由规则中增加参数，在path最后增加 :id

 { name: 'users', path: '/users/:id', component: Users },

2. 通过 传参，在路径上传入具体的值

 <router-link to="/users/120">用户管理</router-link>

3. 在组件内部可以使用，this.$route 获取当前路由对象

var Users = {
     template: '<div>这是用户管理内容 {{ $route.params.id }}</div>',
     mounted() {
         console.log(this.$route.params.id);
     }
 };

vue-router-重定向

当希望某个页面被强制中转时 可采用redirect 进行路由重定向设置

	{
		  path: "/sport",
		  redirect: "/news", // 强制跳转新闻页
		  component: {
		   template: `<div>体育</div>`
  }
},

vue-router-编程式导航

跳转不同的组件 不仅仅可以用router-link 还可以采用代码行为

• 跳转不同的组件 不仅仅可以用router-link 还可以采用代码行为
• (Vue实例)this.$router 可以拿到当前路由对象的实例
• 路由对象的实例方法 有 push replace, go() goBack
• push 方法 相当于往历史记录里推了一条记录 如果点击返回 会回到上一次的地址
• replace方法 想相当于替换了当前的记录 历史记录并没有多 但是地址会变
• go(数字) 代表希望是前进还是回退,当数字大于0 时 就是前进 n(数字)次,小于0时,就是后退n(数字)次
• goBack() 代表返回上个页面

vue-router-routerlink-tag-激活样式

当前路由在导航中是拥有激活class样式的
设置激活class样式即可

router-link-active是一个固定的class => 该class默认值就是 router-link-active,可以变,

linkActiveClass => 改变 router-link的激活样式的class

<a href="#/news" class="router-link-exact-active router-link-active">新闻</a>

vue-router-嵌套路由

要注意，以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。

{
   path:'/music',
   children:{
       path:'/pop'  //此时该条路由 就是 /pop
   }
}
// 如果想使用 /music/pop 可以这样
{
   path:'/music',
   children:{
       path:'/music/pop'  //此时该条路由 就是 /music/pop
   }
}
// 或者
{
   path:'/music',
   children:{
       path:'pop'  //此时该条路由 就是 /music/pop
   }
}