19、Vue-router参数

19、Vue-router参数


<html>
	<head>
		<meta charset="utf-8">
		<title>行找的皮卡丘title>
	head>
	<body>
		<div id="app">

		div>
	body>
	<script type="text/javascript" src="js/vue.min.js">
		// 下载vue-router  项目目录下:npm install vue-router 
		// 1、vue-router依赖于Vue  所以要引入Vue模块
	script>
	<script type="text/javascript" src=".\node_modules\vue-router\dist\vue-router.js">
		// 2、引入vue-router
	script>

	<script type="text/javascript">
		// 3、让Vue 使用VueRouter创建
		// Vue.use(VueRouter);


		var UserParams = {
			template: `
				
我是用户1
`
, // 当引入vue-router时 会抛出两个全局对象 挂载到Vue实例化对象 created() { console.log(this.$router); // this.$router(它就是VueRouter) // 获取传过来的id值 可以拿着这个id去向后端发起请求获取响应数据 console.log(this.$route.params.id); // this.$route(配置路由信息对象) }, }; var UserQuery = { template: `
我是用户2
`
, }; // 4、创建router对象 // 路由范式 // 1)xxxx.html#user/1 params 动态路由参数 // 2)xxxx.html#/user?userId=1 query 参数查询 var router = new VueRouter({ // 5、配置路由对象 routes: [ // 路由匹配的规则 { // 动态路由参数 以冒号开头 path: '/user/:id', component: UserParams, // 给当前路由命名 name: 'userP', }, { path: '/user', component: UserQuery, name: 'userQ', }, ] }); // 引入vue-router模块后 会抛出两个全局组件 // 1)router-link 相当于a标签,里面的to属性相当于href属性 // 2)router-view 路由匹配组件出口 (它渲染的组件是你使用 vue-router 指定的) var App = { template: `
用户1 用户2
`
, } new Vue({ el: '#app', data() { return { } }, components: { App }, // 6、交给Vue实例化对象管理 router: router, template: ` `, });
script> html>

你可能感兴趣的:(Vue学习基础)