小张和vue-router

最新推荐文章于 2024-04-20 20:30:09 发布

小张小张_遇事不慌

最新推荐文章于 2024-04-20 20:30:09 发布

阅读量79

点赞数

分类专栏： # css/html 文章标签： html5

本文链接：https://blog.csdn.net/weixin_44617291/article/details/107906330

版权

css/html 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

参考资料

router冲冲冲

基本结构router-link to

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
    <div id="app">
        <h1>hello APP!</h1>
        <p>
            <!-- router-link组件 导航-->
            <!--通过传入to属性指定链接-->
            <!-- <router-link>会被渲染成一个<a>标签-->
            <router-link to="/foo">Go to Foo</router-link>
            <router-link to="/bar">Go to Bar</router-link>
        </p>

        <!--路由出口-->
        <!-- 路由匹配到的组件将会渲染在这里-->
        <router-view></router-view>
    </div>

<script>
    //如果使用模块化机制编程，导入Vue和VueRouter，要调用Vue.use(VueRouter)
    //1、定义路由组件，也可以从其他文件import进来
    const Foo={template:'<div>foo</div>'}
    const Bar={template:'<div>bar</div>'}
    //2、定义路由
    //每个路由应该映射一个组件，其中“component”可以是通过Vue.extend()创建的组件构造器
    //也可以是一个组件配置对象
    const routes=[
        {path:'/foo',component:Foo},
        {path:'/bar',component:Bar}
    ]
    //3、创建router实例，然后传‘routes'配置
    const router=new VueRouter({
        routes//缩写：相当于router:routes
    })
    //4、创建和挂载根实例
    //记得要通过router配置参数注入路由
    //从而让整个应用都有路由功能
    const app=new Vue({
        router
    }).$mount('#app')
    //现在应用已经启动了
</script>
</body>
</html>

router的步骤(定义路由+定义组件+创建实例+挂载)

如果模块化编程的话，需要调用Vue/use(VueRouter)
定义路由组件，也可以从其他文件import过来const Foo={template:''<div>foo</div>} 其中夹在div中间的foo是点击后希望出现的内容，出现在<router-view>中
定义路由，每个路由都会映射一个组件const routes=[{path:'/foo',component:Foo}]其中/foo是在router-link to指向的链接，而Component是上面刚刚定义过的Foo
创建router实例，然后传‘routes’配置const router=new VueRouter({routes//或者是router:routes})
创建和挂载根实例，要通过router的配置注入路由，从而整个应用都有路由功能const app=new Vue({router]).$mount('#app')

动态路由匹配

目的：把某种模式匹配到的所有路由，全都映射到同个组件

const User={
	template:'<div>User</div>'
}
const router=new VueRouter({
	routes:[
	//动态路径参数 以冒号开头
	{path:'/user/:id',component:User}
	]
})

在这种模式下/user/xiaoming和/user/lili都将映射到相同的路由
一个“路径参数”使用冒号：标记。当匹配到一个路由时，参数值会被设置到this.$route.params，可以在每个组件内使用。于是我们可以更新User的模板，输出当前用户的ID：

const User={
	template:'<div>User{{$route.params.id}}</div>'
}

可以在一个路由中设置多段参数，对应的值都会设置到$route.params中

模式	匹配路径
/user/:username	/user/Mike
/user/:username/post/:post_id	/user/Mike/post/12138

响应路由参数的变化

使用路由参数时，从/user/foo导航到/user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比销毁再创建，复用给高效。同时意味着，组件的生命周期钩子不会再被调用
复用组件时，想对路由参数的变化作出响应的话，你可以简单地watch（监测变化）$route对象或者引入beforeRouteUpdate导航守卫：

const User={
	template:'...',
	watch:{
		$route(to,from){
			//对路由变化做出响应
		}
	}
}

const User={
	template:'...',
	beforeRouteUpdate(to,from,next){
	//对路由变化做出响应
	//不要忘记next()
}

捕获所有路由或404Not found 路由

通配符*上场了！！！！

{
	//会匹配所有路径
	path:'*'//通常用于客户端404错误
}
{
	//会匹配以‘/user-’开头的任意路径
	path:'/user-*'
}

当使用一个通配符时，$route.params会自动添加一个名为pathMatch参数。它包含了URL通过通配符被匹配的部分：

//给出一个路由{path:'/user-*'}
this.$route.push('/user-admin')
this.$route.params.pathMatch//'admin'
//给出一个路由{path:'*'}
this.$router.push('/non-existing')
this.$route.params.pathMatch//'non-existing'

匹配优先级

同一个路径可以匹配多个路由，此时，匹配的优先级就按照路由的定义顺序：谁先定义的，谁的优先级就最高

嵌套路由

const router=new VueRouter({
	routes:[
	{path:'/user/:id',component:User,
	children:[
	{
	//当/user/:id/profile 匹配成功
	//UserProfile 会被渲染在User的<router-view>中
	path:'profile',
	component:UserProfile
},
{
	//当/user/:id/posts 匹配成功
	//UserPosts 会被渲染在User的<router-view>
	path:'posts'，
	component:UserPosts
}，
{
	//当/user/:id 匹配成功
	path:'',
	componnet:UserHome
}]}]})

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

编程式导航

除了使用<router-link>创建a标签来定义导航链接，我们还可以借助router的实例方法，通过编写代码来实现。

router.push(location,onComplete?,onAbort?)

在Vue实例内部，可以通过$router访问路由实例。
想要得到不同的URL，则使用router.push方法。这个方法会向history栈添加一个新的记录，所以，当用户点击后退按钮，回到之前的URL
<router-link :to="..."等同于router.push(...)

//字符串
router.push('home')
//对象
router.push({path:'home'})
//命名的路由
router.push({name:'user',params:{userId:'123'}})
//带查询参数，变成/register?plan=private
router.push({path:'register',query{plan:'private'}})

注意：如果提供了path，params会被忽略，上述例子中的query并不属于这种情况

const userId='123'
router.push({name:'user',params:{userId}})//   /user/123
router.push({path:'/user/${userId}'})//   /user/123
router.push({path:'/user',params:{userId]}) //  /user   (params不生效)

router.replace(location,onComplete?,onAbort?)

跟router.push很像，唯一的不同就是，它不会向history添加新纪录，而是替换当前的history记录。

声明式	编程式
`<router-link :to="..." replace>`	`router.replace(...)`

router.go(n)

这个方法的参数是一个整数，意思是在history记录中向前或者后退多少步，类似window.history.go(n)

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

//在浏览器中后退一步记录，等同于history.back()
router.go(-1)

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

//如果history记录不够用，就失败
router.go(100)
router.go(100)

小张小张_遇事不慌

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
小张和vue-router

参考资料router冲冲冲基本结构router-link to动态路由匹配响应路由参数的变化基本结构router-link to<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://unpkg.com/vue/dist/vue.js">&lt
复制链接

扫一扫