vue笔记-6 vue中router路由 路由参数的传递
Vue中的路由
VueRouter
路由:根据请求的路径按照一定的路由规则 进行的请求转发 从而帮助我们实现请求的管理
作用:在vue中实现组件的动态切换
在线引入路由的cdn:
`
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<a href="#/login">点我登录a>
<a href="#/register">点我注册a>
<router-view>router-view>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js">script>
<script>
//创建登录的组件
const login = {
template:" 登录
"
};
//创建注册的组件
const register = {
template:" 注册
"
};
//创建路由对象
const route = new VueRouter({
// routes !!! 非 routers
routes:[
//路由规则 设置请求路径 path: 路由的路径 component:路径对应的组件
{
path:'/login',component:login},
{
path:'/register',component: register}
]
});
//创建Vue实例
const app = new Vue({
el:"#app",
data:{
},
methods: {
},
components: {
//注册组件
login,
register
},
//注册路由对象
router:route
});
script>
body>
html>
router-link
作用:用来替换我们在切换路由时a标签切换路由 不需要手动加入 #
1.router-link 用来替换使用a标签实现路由切换 好处是不需要书写#号直接书写路由路径
2.router-link to属性用来书写路由路径 tag属性:用来将router-link渲染成指定的标签
默认路由
path:'/' ,redirect:'/***'
作用:用来第一次接入界面所展示的一个默认的组件
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<router-link to="/login" >我要登录router-link>
<router-link to="/register" >点我注册router-link>
<router-view>router-view>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js">script>
<script>
//创建登录的组件
const login = {
template:" 登录
"
};
//创建注册的组件
const register = {
template:" 注册
"
};
const def= {
template: " 默认显示的组件
"
};
//创建路由对象
const route = new VueRouter({
// routes !!! 非 routers
routes:[
//路由规则 设置请求路径 path: 路由的路径 component:路径对应的组件
{
path: '/' ,redirect:'/def'},
{
path:'/def',component: def},
{
path:'/login',component:login},
{
path:'/register',component: register}
]
});
//创建Vue实例
const app = new Vue({
el:"#app",
data:{
},
methods: {
},
components: {
//注册组件
login,
register,
def
},
//注册路由对象
router:route
});
script>
body>
html>
路由中参数的传递
通过?号形式拼接参数 和 采用restful风格 拼接参数
使用? 形式拼接参数时
组件获取参数 $route.query.参数名
使用restful 传递参数时
路由规则:var router = new VueRouter({ routes:[ {path:'/register/:参数名/:参数名',component:组件对象} //定义路径中获取对应参数 ] });
组件获取参数 $route.params.参数名
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<router-link to="/login?id=999&name=小新" >我要登录router-link>
<router-link to="/register/111/小白" >点我注册router-link>
<router-view>router-view>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js">script>
<script>
//创建登录的组件
const login = {
template:'用户登录{
{ this.$route.query.id }} {
{ this.$route.query.name }}
',
};
//创建注册的组件
const register = {
template:'用户注册 {
{ $route.params.id }} {
{ $route.params.name }}
',
created(){
console.log("注册组件中id: "+this.$route.params.id+this.$route.params.name);
}
};
const def= {
template: " 默认显示的组件
"
};
//创建路由对象
const route = new VueRouter({
// routes !!! 非 routers
routes:[
//路由规则 设置请求路径 path: 路由的路径 component:路径对应的组件
{
path: '/' ,redirect:'/def'},
{
path:'/def',component: def},
{
path:'/login',component:login},
{
path: '/register/:id/:name', component: register}
]
});
//创建Vue实例
const app = new Vue({
el:"#app",
data:{
},
methods: {
},
components: {
//注册组件
login,
register,
def
},
//注册路由对象
router:route
});
script>
body>
html>
