How to use vue3+TypeScript+vue-router

Easy to use

Create a project

vue-cli create
vite creation

Install vue-router

Create/Modify Components

Modify the entry ts

Start Vue

Access in browser

File structure picture

Comprehensive Use

Dynamic parameters

Use watch to monitor dynamic parameters
Using the Combination API to monitor dynamic parameters

Redirect

Naming and Aliases

Named Routes
Named Views
Aliases

Nested Routes

Programmatic Routing

Easy to use

Create a project

vue-cli create

 $npm install -g @vue/cli
$vue --version
@vue/cli 4.5.15
$vue create my-project

Then the steps:

Please pick a preset
Select Manually select features
Check the features needed for your project
Select TypeScript . Pay special attention to the spacebar to select and the Enter key to proceed.
Choose a version of Vue.js that you want to start the project with
Select 3.x (Preview)
Use class-style component syntax
Enter directly
Use Babel alongside TypeScript
Enter directly
Pick a linter / formatter config
Enter directly
Use history mode for router?
Enter directly
Pick a linter / formatter config
Enter directly
Pick additional lint features
Enter directly
Where do you prefer placing config for Babel, ESLint, etc.?
Enter directly
Save this as a preset for future projects?
Enter directly

File structure:

 my-project
+--- babel.config.js
+--- package-lock.json
+--- package.json
+--- public
| +--- favicon.ico
| +--- index.html
+--- README.md
+--- src
| +--- App.vue
| +--- assets
| | +--- logo.png
| +--- components
| | +--- HelloWorld.vue
| +--- main.ts
| +--- shims-vue.d.ts
+--- tsconfig.json
+--- node_modules
| +--- ...

The entry file is src/main.ts

vite creation

Execute the following command to create a project

 $npm init vite-app <project-name>
$cd <project-name>
$ npm install
$ npm run dev

File structure:

 project-name
+--- index.html
+--- package-lock.json
+--- package.json
+--- public
| +--- favicon.ico
+--- src
| +--- App.vue
| +--- assets
| | +--- logo.png
| +--- components
| | +--- HelloWorld.vue
| +--- index.css
| +--- main.js
+--- node_modules
| +--- ...

The entry file is src/main.ts

Note: Since the project created using the vite method does not have a vue declaration file, we need to customize it, otherwise an error will be reported.
src/shims-vue.d.ts

 /* eslint-disable */
declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

Install vue-router

 $ npm install vue-router@4

At this point, package.json is as follows:

 {
  "name": "my-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0",
    "vue-router": "^4.0.12"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-typescript": "^7.0.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0",
    "typescript": "~4.1.5"
  }
}

Create/Modify Components

Create src/router/index.ts

 import { createRouter, createWebHashHistory } from "vue-router"
 
import Home from '../components/Home.vue'
import About from '../components/About.vue'
import User from '../components/User.vue'
 
const routes = [
	// See below for details of router parameters {
		path: "/home",
		name: "home",
		component: Home
	},
	{
		path: "/about",
		name: "about",
		component: About
	},
	{
		path: "/user/:uid", // dynamic parameter name: "user",
		component: User
	}
]
export const router = createRouter({
	history: createWebHashHistory(),
	routes: routes
})

Create components: Home.vue About.vue User.vue

src/components/Home.vue

 <template>
  <div>home component</div>
</template>
 
<script lang="ts">
import { defineComponent } from "vue";
 
export default defineComponent({
  name: "Home",
  setup() {
	return {
	  //Returned data };
  },
});
</script>

src/components/About.vue

 <template>
  <div>About component</div>
</template>
 
<script lang="ts">
import { defineComponent } from "vue";
 
export default defineComponent({
  name: "About",
  setup() {
	return {
	  //Returned data };
  },
});
</script>

src/components/User.vue

 <template>
  <div>User component</div>
</template>
 
<script lang="ts">
import { defineComponent } from "vue";
 
export default defineComponent({
  name: "User",
  setup() {
	return {
	  //Returned data };
  },
});
</script>

Modify App.vue

 <template>
  <div>{{ appMessage }}</div>
  <!-- router-link will be rendered as a tag-->
  <router-link to="/home">home</router-link>
  <router-link to="/about">about</router-link>
  <router-link to="/user/lczmx">user</router-link>
 
  <!-- Routing exit -->
  <!-- Components matched by the route will be rendered here-->
  <router-view></router-view>
</template>
 
<script lang="ts">
import { defineComponent } from "vue";
 
export default defineComponent({
  name: "App",
  setup() {
	const appMessage = "App component";
	return {
	  //Returned data appMessage,
	};
  },
});
</script>
<style>
/* Add styles */
#app {
  text-align: center;
  margin-top: 50px;
}
a {
  margin: 30px;
  display: inline-block;
}
</style>

Modify the entry ts

Modify src/main.ts :

 import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
 
import { router } from './router'
 
// Create an application and return the corresponding instance object const app = createApp(App)
 
// Install vue-router plugin app.use(router)
// Call the mount method app.mount('#app')

Start Vue

 $ npm run serve

> [email protected] serve
> vue-cli-service serve 

 INFO Starting development server...
98% after emitting CopyPlugin

 DONE Compiled successfully in 6387ms 4:14:30 PM

  App running at:
  - Local: http://localhost:8080/
  - Network: http://192.168.43.12:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

No issues found.

Access in browser

According to the prompt, visit http://localhost:8080/ , as shown below

File structure picture

Comprehensive Use

Dynamic parameters

Suppose we need routes: /user/lczmx and /user/jack , but we obviously cannot define two different components for these two routes. The best way is to use dynamic parameters:

 const routes = [
  // Dynamic segments start with a colon { path: '/users/:id', component: User },
  // Use regular expression `()` The contents will be passed to the previous pathMatch
  // Value under route.params.pathMatch { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },
]

When matching, the parameters are mapped to currentRoute.value.params of router instance.

Note in vue2: Since this.$route and this.$router cannot be used in setup
As for how to obtain it, see my other blog: vue3 gets the current route and official website: Vue Router and combined API

Match List

Matching Pattern	Matching Path	Parameters of the current route
`/users/:username`	`/users/eduardo`	`{ username: 'eduardo' }`
`/users/:username/posts/:postId`	`/users/eduardo/posts/123`	`{ username: 'eduardo', postId: '123' }`

When using routes with parameters, be aware that: Since the same component instance will be reused, the component lifecycle hooks will not be called.

But we can monitor the route

Use watch to monitor dynamic parameters

Modify src/components/User.vue :

 <template>
  <div>User component</div>
  <p>Current user: {{ uid }}</p>
 
  <router-link to="/user/lczmx">lczmx</router-link>
  <router-link to="/user/jack">jack</router-link>
</template>
 
<script lang="ts">
import { defineComponent, watch, ref } from "vue";
import { useRouter } from "vue-router";
 
export default defineComponent({
  name: "User",
  setup() {
    const router = useRouter();
    const uid = ref(router.currentRoute.value.params.uid);
    watch(
      // Listen for non-responsive data() => router.currentRoute.value,
      (val) => {
        // Modify uid
        uid.value = val.params.uid;
      }
    );
    return {
      // Returned data uid,
    };
  },
});
</script>

Using the Combination API to monitor dynamic parameters

https://next.router.vuejs.org/en/guide/advanced/composition-api.html

Redirect

The following uses all the parameters of router :

 const routes = [
    {
        path: "/",
        // Method 1: hard-code the URL
        // redirect: "/home", // redirect to "/home" when accessing "/"
 
        // Method 2: Jump to the corresponding named route redirect: { name: "home" },
 
        //Writing method 3 defines a method //This method can also return a relative path/*
        redirect: to => {
            // The method receives the target route as parameter "to"
 
            // return redirected string path/path object			
			// query specifies parameters return { path: '/home', query: { q: to.params.searchText } }
        },
        */
    },
    {
        path: "/home",
        name: "home",
        component: Home
    }
]

Note that redirects do not trigger navigation guards

Attached is an example from the official website: Named Views - Vue Router 4 examples

Naming and Aliases

Named Routes

Give the route a name that can be used in other routes, such as redirect and router-link

 const routes = [
  {
    path: '/user/:username',
    name: 'user',
    component: User
  }
]

The use of redirect is as above, and router-link is as follows:

 <template>
  <div>User component</div>
  <p>Current user: {{ uid }}</p>
 
  <router-link :to="{ name: 'user', params: { uid: 'lczmx' } }"
    >lczmx</router-link
  >
  <router-link :to="{ name: 'user', params: { uid: 'jack' } }"
    >jack</router-link
  >
</template>

Use in router.push ( router is the router object):

 router.push({ name: 'user', params: { uid: 'lczmx' } })

Named Views

That is, we can define a name router-view to achieve the effect of reusability. We can use this function to implement a sidebar, etc.

For example

Define the routes:

 import { createRouter, createWebHashHistory } from "vue-router"
 
import Home from '../components/Home.vue'
import About from '../components/About.vue'
import User from '../components/User.vue'
 
const routes = [
	{
		path: "/",
		components:
			default: Home, // default uses the Home component a: About, // a uses the About component b: User, // b uses the User component },
 
	},
	{
		path: "/home",
		components:
			default: About, // Use the About component by default a: Home, // a uses the Home component b: User, // b uses the User component },
 
	},
]
 
 
export const router = createRouter({
	history: createWebHashHistory(),
	routes: routes
})

Modify App.vue

 <template>
  <div>{{ appMessage }}</div>
 
  <!-- router-link will be rendered as a tag-->
  <router-link to="/">/</router-link>
  <router-link to="/home">/home</router-link>
 
  <!-- Routing exit -->
  <!-- Components matched by the route will be rendered here-->
  <!-- default -->
  <router-view></router-view>
  <router-view name="about"></router-view>
  <router-view name="user"></router-view>
</template>
 
<script lang="ts">
import { defineComponent } from "vue";
 
export default defineComponent({
  name: "App",
  setup() {
	const appMessage = "App component";
	return {
	  //Returned data appMessage,
	};
  },
});
</script>
<style>
/* Add styles */
#app {
  text-align: center;
  margin-top: 50px;
}
a {
  margin: 30px;
  display: inline-block;
}
</style>

Other Components
About.vue :

 <template>
  <div>about component</div>
</template>

Home.vue :

 <template>
  <div>home component</div>
</template>

User.vue

 <template>
  <div>user component</div>
</template>

Start the service and access vue

As shown:

If you do not specify a view name, then the default

Aliases

It can achieve the effect of different URLs accessing the same route

 const routes = [
    // You can access "/home" or "/"
    // and the access path will not change{
        path: "/home",
        name: "home",
        component: Home,
        alias: "/"
    }

Nested Routes

Previously, we defined router-view in App.vue to let other components render there

But if we need to render in other components, we need nested routing

Use children to nest routes, whose values are route data, just like the external router definition

example:

router.index.ts

 import { createRouter, createWebHashHistory } from "vue-router"
 
import Home from '../components/Home.vue'
import About from '../components/About.vue'
import User from '../components/User.vue'
import UserHome from '../components/UserHome.vue'
import UserSettings from '../components/UserSettings.vue'
import UserProfile from '../components/UserProfile.vue'
 
const routes = [
	// You can access "/home" or "/"
	// and the access path will not change {
		path: "/home",
		name: "home",
		component: Home,
		alias: "/"
	},
	{
		path: "/about",
		name: "about",
		component: About
	},
	{
		path: "/user/:uid", // dynamic parameter name: "user",
		component: User, // Routers that are nested in router-view rendering children: [
			// Match URLs like /user/lczmx
			{ path: "", component: UserHome },
 
			// Match URLs like /user/lczmx/settings
			{ path: "settings", component: UserSettings, name: "user-settings" },
 
			// Match URLs like /user/lczmx/profile
			{ path: "profile", component: UserProfile, name: "user-profile" }
		]
	}
]
 
 
export const router = createRouter({
	history: createWebHashHistory(),
	routes: routes
})

Note: If there is no path: "" in children , then accessing /user/lczmx will only result in a blank page.

User.vue

 <template>
  <div>
	<router-link :to="{ name: 'user-settings' }">settings</router-link>
	<router-link :to="{ name: 'user-profile' }">profile</router-link>
  </div>
 
  <router-view></router-view>
</template>

UserHome.vue

 <template>
  <div>User homepage</div>
</template>

UserProfile.vue

 <template>
  <div>User details page</div>
</template>

UserSettings.vue

 <template>
  <div>User settings page</div>
</template>

Start and access

Test in browser:

Programmatic Routing

That is, instead of using the a tag, the route is changed through js/ts . The principle is to add a new record to history stack in vue3. There are the following ways to write it:

 <template>
  <div>about component</div>
  <button @click="changeRouter">Change route</button>
</template>
 
 
<script lang="ts">
import { defineComponent } from "vue";
 
import { useRouter } from "vue-router";
 
export default defineComponent({
  name: "About",
  setup() {
    // Get the router object const router = useRouter();
 
    const changeRouter = () => {
      /* Example of modifying routes */
 
      // 1 string path router.push("/users/lczmx");
 
      // 2 Object with path router.push({ path: "/users/lczmx" });
 
      // 3 named routes, and added parameters to let the routes build the url
      router.push({ name: "user", params: { username: "lczmx" } });
 
      // 4 with query parameters, the result is /register?plan=private
      router.push({ path: "/register", query: { plan: "private" } });
 
      // 5 with hash, the result is /about#team
      router.push({ path: "/about", hash: "#team" });
 
      // 6 We can build the url manually, but we have to handle the encoding ourselves const username = "lczmx";
      router.push(`/user/${username}`); // -> /user/lczmx
      // Similarly router.push({ path: `/user/${username}` }); // -> /user/lczmx
      // If possible, use `name` and `params` to benefit from automatic URL encoding router.push({ name: "user", params: { username } }); // -> /user/lczmx
 
      // 7 `params` cannot be used with `path`, otherwise `params` will be ignored router.push({ path: "/user", params: { username } }); // -> /user
 
      // 8 replace is true and does not add to history router.push({ path: "/home", replace: true });
      // Equivalent to router.replace({ path: "/home" });
 
      // 9 Across history // Move forward one record, same as router.forward() router.go(1);
      // Return a record, same as router.back() router.go(-1);
      // Go forward 3 records router.go(3);
      // If there are not so many records, fail silently router.go(-100);
      router.go(100);
    };
    return {
      //Returned data changeRouter,
    };
  },
});
</script>
 
<style>
button {
  margin: 30px;
}
</style>

For more information, see vue-router4 official website: Vue Router

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: