vue Routing Basics

vue Routing Basics

vue vue-router using a plug-in processing route, the route is to develop a single-page application must master knowledge.

What is vue-router?

(1) VUE-Router is Vue official front-end routing plug-in that we can achieve single-page application-based routing and components.

(2) with the traditional difference is that page:

• The traditional application uses a page 后端路由, that page is achieved switching and jump through hyperlinks.
• In vue-router single-page applications, it is by switching between the paths (in fact the switch assembly).

router-link and router-view assembly

router-linkIs a a(linked) package labels, router-viewrouting view, rendering router-link assembly to match, may be used in conjunction with <transition>and <keep-alive>use.

More Details

Routing Configuration

Dynamic Routing

$routeIt is the current route, the available watchmonitoring its changes in the assembly, there is a paramsproperty value of the object contains a dynamic routing.

watch: {
  '$route'(to) {
	 console.log(to);
	 //将路由的 params 属性赋值给组件的 data 属性
	 to.params && to.params.view && (this.effect = to.params.view)
	},
}
复制代码

The difference between the route and router

Routing object:

{
	path:'/argu/:name',
    // 使用 import 动态引入路径对应的组件，起到懒加载的作用
    component:()=>import('@/views/ArguPage')
}
复制代码

In this route may be 组件such a value acquired name:

$route.params.name //给同一个组件设置传递不同的params，实现组件的复用
复制代码

Nested routing

Add a routing object childrenattribute value is an array, it may comprise a plurality of sub-routes. 子路由 path 前面不能有 /. Parent component corresponding to the route must export route, i.e., router-view.

Named routes

Routing object attribute name is the name of the route, which can be used to specify the path name. In the attribute to the router-link 动态绑定 路由对象.

<router-link :to="{name:'home'}"></router-link>
复制代码

Named Views

route-view is the view route, when only one view, the route matching component rendered in this view, will have to view multiple views named.

<!-- 视图渲染组件,该组件内不需要房子任何内容，可写成只闭合标签-->
<router-view />
<!-- 有多个路由视图需要匹配，则用命名视图 -->
<router-view name="sister"></router-view>
<router-view name="brother"></router-view>
复制代码

Route Object:

{
	path:'/name/view',
	name:'name_view',
	// 注意命名视图的 components 和 组件的 component 的区别
	components:{
		// 不给 router-view 设置 name 属性，name 值就是 default
		default:()=>import('@/views/ChildPage'),
		sister:()=>import('@/views/SisterPage'),
		brother:()=>import('@/views/BrotherPage'),
	}
}
复制代码

JS routing operation

$ Router routing objects have multiple functions push, go,replace

push to navigate to a different page, you will enter the path of history. $router.pushAnd window.history.pushSatethe same. Acceptable push different parameters:

//字符串路径
this.$router.push('home')

// 路由对象
this.$router.push({path:'home'})

// 命名路由加参数
this.$router.push({name:'argu',params:{name:'jack'}})
//  path 路由和 query
this.$router.push({path:'argu',query:{name:'jack'}});
//  path  和 params 不可一起使用，params 会被忽略
this.$router.push({path:'argu',params:{name:'jack'}});
this.$router.push({name:'argu',query:{name:'jack'}});

复制代码

go parameter is an integer representing the number of rollback or history forward.

// 在浏览器记录中前进一步，等同于 history.forward()
$router.go(1)

// 后退一步记录，等同于 history.back()
$router.go(-1)

// 前进 3 步记录
$router.go(3)

// 如果 history 记录不够用，那就默默地失败呗
$router.go(-100)
$router.go(100)
复制代码

router.replace(location)= window.history.replaceStateWith router.push like, the only difference is that it does not add a new record to the history, but it is saying the same method name - replace the current history record

Usage scenarios: without user rollback, such as permission verification.

// 路由名字
this.$router.replace('name_view');
// 字符串路径
this.$router.replace('/name/view');
// 路由对象
this.$router.replace({path:'/name/view'});
// 命名路由带 params 
this.$router.replace({name:'name_view',params:{age:24}});
// path 和 query
this.$router.replace({path:'name_view',query:{age:24}});
// this.$router.replace({path:'/name/view',params:{age:24}});
复制代码

Redirect and Alias

// 路由重定向:访问 /index ，重定向到 /
{
	path:'/index',
	redirect:'/'
}
复制代码

Objects may also be provided a redirect:

{
	path:'/index',
	redirect:{
		name:'home'
	}
}
复制代码

It may also be provided to redirect a function to pass a parameter, according to the different value of the object, to redirect to a different page, a return 命名路由or 字符串路径.

{
	path:'/index',
	redirect:to=>{
		// do something with to 
		return {
			name:'home'
		}
	}
}
复制代码

to A path object comprises a parameter:

{
	name: "index",
	meta: {},// 路由元数据，可在全局导航守卫中获取该对象，然后不同页面设置不同的值，比如设置页面的标题
	path: "/index", // 路由路径 解析为绝对路径 /a/b
	hash: "", // 书签
	query: {}, // 查询参数 /a?user=jack, $route.query.uer 的值为 jack
	params: {}, //
	fullPath: "/index", // 完整路径
	matched: [{ // 当前路由的所有嵌套路径片段的路由记录,路由记录就是路由的副本。
		path: "/index",
		regex: {
			keys: []
		},
		components: {},
		instances: {},
		name: "index",
		meta: {},
		props: {}
	}],
    redirectedForm:''// 重定向来源的名字
}
复制代码

router.beforeEach((to, from, next) => {
	console.log('①，全局前置守卫,beforeEach');
    //给每个页面设置不同的标题，标题就从 meta 中获取
    //setTitle = (title)=>{
	// window.document.title=title||'admin'
	//}
	to.meta && setTitle(to.meta.title);
	next(()=>{
		console.log('②，全局前置守卫,beforeEach');
	});
});
复制代码

Path Alias

{
	name: 'home',
	alias:'home_page',// 路径别名
	path: '/',
	component: Home
}
复制代码

Reproduced in: https: //juejin.im/post/5d05d2ba5188256073338800