从vue2到vue3的改变

  • new Router 变成createRouter
  • Vue Router 不再是一个类，而是一组函数
  • vue2输入 mode: history 来从哈希模式切换到 history 模式，vue3使用 history: createWebHistory() 来实现这一点，但需要引入createWebHistory
  • 动态路由：在Vue3中，摒弃了 addRoutes() 方法，只保留了 addRoute() 单个添加路由配置的方法
  • https://next.router.vuejs.org/guide/migration/index.html#new-router-becomes-createrouter

vue2

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
//vue2 
import VueRouter from 'vue-router';
//安装插件
Vue.use(VueRouter); //挂载属性
//创建路由对象并配置路由规则
let router = new VueRouter({
    mode: 'history',
    routes: [
        {
    	path: "/login",
    	name: "Login",
    	component: () =>
      import("../views/Login/index.vue")
 	 	},
    ]
});
export default router;

//main.js下引入路由文件
import router from "./router";
//new Vue 启动
new Vue({
    el: '#app',
    //让vue知道我们的路由规则
    router: router, //可以简写router
    render: c => c(App),
})

vue3

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
//vue3
import { createRouter,createWebHistory } from "vue-router";
const routes = [
  {
    path: "/",
    redirect: "login"
  },
  {
    path: "/login",
    name: "Login",
    component: () =>
      import("../views/Login/index.vue")
  },
];
const router = createRouter({
  history: createWebHistory()
  routes
});

export default router;

//main.js下引入路由文件
import router from "./router";

createApp(App)
	.use(router)

Router和Route

vue-router中$router 和$route的区别

  • $router: 代表的是路由器对象，包含一些实现路由跳转的方法
router
  • $route: 代表的是当前路由对象，包含一些路由相关的属性
route

vue3中引入的useRoute,useRouter 相当于vue2的 this.$route()，this.$router()

1
2
3
4
5
6
import { useRoute, useRouter } from "vue-router";

const route = useRoute();
const router = useRouter();

router.push({ name: "login", params: { data: "ok" } });

函数里调用router.push()跳转路由

  • 不带参数
1
2
3
router.push('/Console');
router.push({ name: "Console"});
router.push({ path: "/console"});
  • params传参：URL参数是不可见的，刷新后参数会消失
    • 不配置path，刷新后页面参数会消失
    • 配置path，url参数可见，刷新页面id会保留
1
router.push({ name: "login", params: { data: "ok" } });
1
2
3
4
5
6
7
//路由配置
{
    path: "/console:id", //或  path: "/console/id"
    name: "Console",
    component: () =>
      import("../views/Console/index.vue")
  },
  • query传参：URL参数可见，刷新后不会消失
1
router.push({ name: "login", query: { data: "ok" } });