vue——路由、query、params、props、replace

1
2
3
4
5
// 引入VueRouter
import VueRouter from "vue-router"
// 使用VueRouter插件
Vue.use(VueRouter)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 用于创建应用的路由器
import VueRouter from "vue-router"
//导入组件
import About from "../components/About"
import Home from "../components/Home"
//创建vue-router实例对象，管理多个路由规则
export default new VueRouter({
    routes: [{
        path: '/home',
        component: Home
    }, {
        path: '/about',
        component: About
    }]
})

1
2
<router-link active-class="active" to="path设置的路由路径">内容</router-link>

1
2
<router-view></router-view>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
routes:[
	{
		path:'/home',
		component:Home,
		children:[
			{
                //这里的路径前面不用加/，遍历到children里面，会自动添加/
				path:'news',
				component:News
			}
		]
	}
]

1
2
<router-link to="/home/news">News</router-link>

1
2
3
4
5
6
7
8
9
10
11
<!-- 跳转路由并携带query参数，to的字符串写法 -->
<router-link :to="`/home/msg/show?id=${item.id}&title=${item.title}`">{{item.title}}</router-link> 

<!-- 跳转路由并携带query参数，to的对象写法 -->
<router-link :to="{
            path: '/home/msg/show',
            query: { id: item.id, title: item.title },
          }">
          {{ item.title }}
</router-link>

1
2
3
4
5
$route.query.属性
如：
$route.query.id
$route.query.title

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
routes: [{
        path: '/home',
        component: Home,
        // 二级路由
        children: [
            {
                path: 'msg',
                component: Msg,
                //三级路由
                children: [{
                 // 命名路由
                    name: 'zhanshi',
                    path: 'show',
                    component: Show
                }]
            }
        ]
    }]

1
2
3
4
5
6
7
//简化前：需要写完整的路径
<router-link to="/home/msg/show">跳转</router-link>
//简化后：直接通过name值跳转
<router-link :to="{name:'zhanshi'}">跳转</router-link>
//配合参数写法
<router-link :to="{name:'zhanshi',query:{id:001,title:'hello'}}">跳转</router-link>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
routes: [{
        path: '/home',
        component: Home,
        // 二级路由
        children: [
            {
                path: 'msg',
                component: Msg,
                //三级路由
                children: [{
                 // 命名路由
                    name: 'zhanshi',
                    //使用占位符声明接收params参数
                    path: 'show/:id/:title',
                    component: Show
                }]
            }
        ]
    }]

1
2
3
4
5
6
7
8
9
10
11
12
<!-- 跳转路由并携带params参数，to的字符串写法 -->
<router-link :to="`/home/msg/show/666/hello`">跳转
</router-link> -->

<!-- 跳转路由并携带params参数，to的对象写法，-->
<router-link :to="{
            name: 'zhanshi',
            params: { id: 666.id, title: 'hello' },
          }">
          跳转
</router-link>

1
2
3
4
5
$route.params.属性
如：
$route.params.id
$route.params.title

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
routes: [{
        // 命名路由
        path: '/home',
        component: Home,
        // 二级路由
        children: [
            {
                path: 'msg',
                component: Msg,
                children: [{
                    name: 'zhanshi',
                    // params参数写法
                    path: 'show/:id/:title',
                    // path: 'show',

                    component: Show,
                    // props的第一种写法:值为对象，该对象中的所有的key-value都会以props的形式传给show组件，不推荐使用，传递的是死数据
                    /*  props: {
                         id: 1,
                         name: 'zs'
                     } */
                    // props的第二种写法：值为布尔值，若布尔值为真，就会把该组件收到的所有params参数（query参数无效），以props的形式传给show组件
                    // props: true,
                    // props的第三种写法：值为函数,形参是$route（返回query或者params都可以）
                    props($route) {
                        return { id: $route.params.id, title: $route.params.title }
                    }
                    // 参数$route解构赋值
                    /* props({ query }) {
                        return { id: query.id, title: query.title }
                    } */
                    // 参数连续解构赋值
                    /* props({ query: { id, title } }) {
                        return { id, title }
                    } */
                }]
            }
        ]
    }]

1
2
3
<router-link replace class="list-group-item" active-class=" active" to="about" >About</router-link >
<router-link :replace="true" class="list-group-item" active-class=" active" to="/home" >Home</router-link >