Here is the codes.
html
<div id="app">
<nav>
<ul>
<router-link to="/user">User List</router-link>
</ul>
</nav>
<router-view></router-view>
</div>
Routes definition
const routes = [
{
path: '/user', component: User,
children: [
{path: '', name:'user-list', component: UserList},
{path: ':id', name: 'user-detail', component: UserDetail}
]
}];
let router = new VueRouter({routes});
export default router;
User
<template>
<div>
<h2>User Center</h2>
<router-view></router-view>
</div>
</template>
<script>
export default {
data () {
return {
}
},
methods:{
}
}
</script>
User list
<template>
<div>
<!--<ul>-->
<!--<li v-for="u of userList">-->
<!--<router-link :to="{ name:'user-detail', params: { id: '4343' }}">{{u.name}}</router-link>-->
<!--</li>-->
<!--</ul>-->
<router-link :to="{ name:'user-detail', params: { id: '4343' }}">3434</router-link>
<!--<a #click="query">++++</a>-->
</div>
</template>
<script>
import {mapActions} from 'vuex'
import {USER_QUERY} from '../store/user.type'
export default {
data () {
return {
userList: []
}
},
methods: {
query: function () {
this.$store.dispatch(USER_QUERY, [{name:'111'},{name:'1222'}])
}
}
}
</script>
User detail
<template>
<div>
<h2>{{ $route.params.id }}</h2>
</div>
</template>
<script>
export default {
data () {
return {
}
},
methods: {
test: ()=> {
}
}
}
</script>
I want click the link in the UserList can navitage to the UserDetail,but it is not working,someone help to check it?
Like this
App
--User
----UserList
http://localhost:8080/#/user
change to
App
--User
----UserDetail
http://localhost:8080/#/user/5454
you have to give path in to in outer-link as /user/:id in your HTML code, like following:
<router-link :to="'/users/' + id">3434</router-link>
See working fiddle here.
I made a stupid mistake like this.
import User from './component/user-list.vue';
Related
I have this default vue navbar which I want to make it more dynamic by using v-for.
Before changes, this is the code:
<template>
<div>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
</template>
After changes, this is the code:
<template>
<div>
<div v-for="navbar in navbars" :key="navbar.id">
<router-link :to="navbar.router">{{ navbar.names }}</router-link>
</div>
</div>
</template>
<script>
export default {
name: "Header",
navbars: [
{ names: "Home", router: "/" },
{ names: "About", router: "/About" }
]
};
</script>
But after converted it, the navbar doesn't show up. Anything I miss out?
You need to define navbars as a data of the component using data
<template>
<div>
<div v-for="navbar in navbars" :key="navbar.id">
<router-link :to="navbar.router">{{ navbar.names }}</router-link>
</div>
</div>
</template>
<script>
export default {
name: "Header",
data: function () {
return {
navbars: [
{ names: "Home", router: "/" },
{ names: "About", router: "/About" }
]
}
}
};
</script>
Can anyone tell me how to use data binding inside a router param?
Trying this, but it isn't working:
<router-link :to="{
name: 'product',
params: {
id: '{{product.id}}',
title: '{{product.title}}'
}
}">Ring 02</router-link>
</nav>
<router-view/>
</section>
</template>
<script>
import { products } from '#/assets/data.json';
export default {
data () {
return {
products
}
}
}
</script>
:to is a shorthand for v-bind:to, So you can access to variables and to simple expression as string, conditions, objects
<router-link :to="{
name: 'product',
params: {
id: product.id,
title: product.title
}
}">Ring 02</router-link>
</nav>
<router-view/>
</section>
</template>
<script>
import { products } from '#/assets/data.json';
export default {
data () {
return {
products
}
}
}
</script>
I'm using Vue CLI 3 and it makes a few routes. One is Home.vue. In my program I am trying to programmaticaly go to different pages. I added the routes I need in router.js but kept the already created routes for Home.vue and About.vue. It works fine until I get to 'Home' and get a warning: [vue-router] Route with name 'Home' does not exist.'
Here is the code:
<template>
<div class='secondItem'>
<h4 v-for="item in menuItems"
#click="bindMe(item)" v-bind:class="{'active':(item === current)}">{{item}}</h4>
</div>
</template>
<script>
export default {
name: 'Header',
data() {
return {
current: '',
menuItems: ['Home', 'About', 'Portfolio', 'Contact'],
}
},
methods: {
bindMe(item) {
this.current = item;
this.$router.push({
path: item
})
}
}
}
<script>
Are you using named routes? In that case you need to use name instead of path:
this.$router.push({
name: item
})
Also, your example can be simplified quite a lot. Try this:
<template>
<div class="secondItem">
<router-link :to="{ name: item }" tag="h4" active-class="active" v-for="item in menuItems" v-bind:key="item">{{item}}</router-link>
</div>
</template>
<script>
export default {
name: 'Header',
data() {
return {
menuItems: ['Home', 'About', 'Portfolio', 'Contact']
}
}
}
<script>
guys, I m new to Vue and taken a coreui admin panel to develop some font vue but now I got stuck in this problem this is nav.js file
export default {
items: [
{
name: 'Product',
url: '/product',
icon: 'fa fa-cart-arrow-down',
children: [
{
name: 'Addproduct',
url: '/product/Addproduct',
},
{
name: 'Listproduct',
url: '/product/Listproduct',
}
]
},
]
}
main container
<template>
<div class="app">
<div class="app-body">
<Sidebar :navItems="nav"/>
<main class="main">
<div class="container-fluid">
<router-view></router-view>
</div>
</main>
<AppAside/>
</div>
</div>
</template>
<script>
import nav from '../_nav'
export default {
name: 'full',
components: {
Sidebar,
},
data () {
return {
nav: nav.items
}
},
computed: {
name () {
return this.$route.name
},
list () {
return this.$route.matched
}
}
}
</script>
here is my sidebar
<template v-for="(item, index) in navItems">
<template v-if="item.title">
<SidebarNavTitle :name="item.name" :classes="item.class" :wrapper="item.wrapper"/>
</template>
<template v-else>
<template v-if="item.children">
</template>
<template v-else>
<SidebarNavItem :classes="item.class">
<SidebarNavLink :name="item.name" :url="item.url" :icon="item.icon" :badge="item.badge" :variant="item.variant"/>
</SidebarNavItem>
</template>
</template>
</template>
i m stroing addproduct in my browser local storage now if when user login and go to dashboard then my i watch which url name is present in browser application or not if present show that else ignore now my problem is that how i can apply if condition like addproduct=addprodcut this this visible else hide
You could have a method in mounted hook, which can fetch data from localstorage and check if it's present in the url or not. Then assign it to a variable in main component which toggles the sidebar. Something like below should work:
<template>
<div class="app">
<div class="app-body">
<Sidebar :navItems="nav" v-if="showSidebar" />
<main class="main">
<div class="container-fluid">
<router-view></router-view>
</div>
</main>
<AppAside/>
</div>
</div>
</template>
<script>
import nav from '../_nav'
export default {
name: 'full',
components: {
Sidebar,
},
data () {
return {
nav: nav.items,
showSidebar: false
}
},
mounted () {
this.checkSidebarVisibility()
},
methods: {
checkSidebarVisibility: function() {
const inLocal = window.localStorage.getItems('your_item');
const inUrl = window.location.toString();
// check if inurl inside inLocal
if (inUrl is in inLocal) {
this.showSidebar = true;
} else {
this.showSidebar = false;
}
}
},
computed: {
name () {
return this.$route.name
},
list () {
return this.$route.matched
}
}
}
</script>
I have a forget-pwd.vue component:
<template>
<div class="page-common">
ABC
</div>
</template>
<script>
</script>
<style scoped>
</style>
in the router.js, there is my route:
export const paths = {
home: '/',
dataCenter: '/data-center',
forgetPassword: '/forget-password',
}
export const app_routes = [
......
{
path: paths.forgetPassword,
name: '忘记密码',
meta: {
title: ''
},
component: (resolve) => require(['./views/忘记密码/forget-pwd.vue'], resolve)
},
];
export const routes = [
...app_routes,
];
this is my index.vue:
<template>
<div class="index">
<i-header ></i-header>
<router-view></router-view>
<i-footer></i-footer>
</div>
</template>
<script>
import Home from './首页/home.vue'
import Header from '../components/header/header.vue'
import Footer from '../components/footer/footer.vue'
export default {
data() {
return {
}
},
methods: {
},
components: {
'home': Home,
'i-header': Header,
'i-footer': Footer,
}
};
</script>
<style scoped>
.index {
}
</style>
in a modal of my header.vue I link to the forget-pwd.vue:
<router-link class="forget-pwd" type="text" to="forgetPwdPath" #click.native="closeModal" >忘记密码?</router-link>
the route is skipped, but the forget-pwd.vue template do not shows up:
You forgot to bind the to in your router link. So bind it:
<router-link class="forget-pwd" type="text" :to="forgetPwdPath" #click.native="closeModal" >忘记密码?</router-link>
Or
<router-link class="forget-pwd" type="text" v-bind:to="forgetPwdPath" #click.native="closeModal" >忘记密码?</router-link>